たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法

ブログに YouTube の動画を埋め込んでいる人は多いと思います。また、最近ではサイトにレスポンシブデザインを採用している人も多いと思います。WordPress でもレスポンシブに対応したテーマが多くリリースされていますね。

レスポンシブデザインのブログに YouTube 動画を埋め込むと、スマートフォンでサイトを見た時に動画が画面からはみ出てしまうことがあります。

埋め込みコードを使って YouTube の動画を埋め込んだ場合、iframe を使って動画を表示します。この iframe の幅が 560px などに指定されているためスマートフォンで表示した時に画面からはみ出してしまうのです。

そんな YouTube 動画をレスポンシブに対応させる方法として、div などで動画のコードを囲って CSS クラスを付与して調整する方法がよく紹介されていますが、毎回 HTML ソースを書き換えるのは面倒ですよね。

ということで、この記事では CSS にたった1行追加するだけでレスポンシブに対応させちゃう方法を紹介したいと思います。

YouTube動画の埋め込み

YouTube の動画をブログなどに埋め込む方法は、ブログにYouTubeの動画を埋め込む方法をご参照ください。

このときコードを変更する必要はありません。発行されたコードをそのまま貼り付けてください。

CSS に以下を追記します。WordPress ならテーマフォルダの style.css などに追記します。

iframe{ width:100%; }

これだけで完了です。簡単でしょ^^

埋め込み動画がはみ出ちゃって気になるなーという方はぜひお試しください。

ちなみにやってることはほぼ同じですが、以下の方法でもレスポンシブに対応できます。


.content iframe{ width:100%; }
iframe{ max-width:100%; }

.content の部分はメインコンテンツの CSS クラスを指定しますので、環境に合わせて変更してください。こちらの記述だと幅の最大値を指定して調整できます。

お好みで使い分けてください。