WordPress

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

スポンサーリンク

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

WordPressのブログ記事で、スマホ画面内に表示されるよう縮小してYoutubeの動画全体を表示させる設定です。

私が使用しているWordPressのテーマでは、Youtubeの動画を埋め込みしたブログ記事を、スマホで表示させると、動画全体が表示されずに、下図のように横幅が切れて表示されてしまいました。(※使用しているWordPressのテーマにもよります。)
スマホの画面の幅でYoutube動画を全体を表示するよう調べて設定したのでメモしておきます。
スマホの画面の幅でYoutube動画を全体を表示したい。
wordpress スマホ 動画表示

設定方法

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

コメント

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