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

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

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

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

設定方法

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