WordPress

WordPressでスマホ画面内に動画の表示

スポンサーリンク

スマホで動画全体を縮小表示

WordPressのブログ記事で、スマホ画面内に表示されるよう縮小してYoutubeの動画全体を表示させる設定です。
この設定で、パソコンでは縮小されず、スマホの場合にスマホの画面にあわせて縮小表示します。
(このことをレスポンシブ対応レスポンシブデザインといいます。
Webデザインの手法の一つ。異なった機器や画面サイズに単一のファイルで対応すること。)

WordPressで、Youtubeの動画を共有したブログ記事で、パソコンでそのブログ記事を表示すると、動画全体が表示されますが
スマホでそのブログ記事を表示させると、スマホの表示画面より動画表示の幅が大きいため動画全体が表示されずに、下図のような感じに、横幅が切れて表示されてしまいます。
wordpress スマホ 動画表示

設定方法

1.WordPressの管理メニューで「外観」-「テーマ編集」の画面を表示。
2.テーマ編集画面のスタイルシートに、
下記の2行を追加します。(例えば、最終行に追加)
.content iframe{ width:100%; }
iframe{ max-width:100%; }
3.「ファイルを更新」ボタンクリック。以上です。
wordpress スマホ 動画表示

コメント

タイトルとURLをコピーしました