YouTube動画の埋め込みをCSSでレスポンシブ対応にする方法

この記事は約2分で読めます。

こんばんは、すずしんです。

ちょっと質問ですが…。
あなたはブログ記事にYouTubeの動画を埋め込んだことはありますか？

特に対策を何もしていない場合には…。
そのまま動画を埋め込むと、その動画はレスポンシブには対応していません。
なので、特にスマホで表示させたときに動画のサイズがおかしくなってしまいます。

そこで、今回の記事では…。
埋め込んだYouTube動画をCSSでレスポンシブ対応にする方法について書いてみようと思います。
ちょっといじるだけですので簡単ですよ。

スポンサーリンク

YouTube動画の埋め込みをレスポンシブ対応にする方法(シンプル編)

最もシンプルにYouTube動画をレスポンシブ対応にするには次のようにします。

まず、YouTubeから埋め込みたい動画の埋め込みコードをコピーして記事に貼り付けます。
そして、そのコードをyoutubeクラスを付加したdivタグで囲みます。
例えば、以下のようになります。

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/cZFPVAOrdXQ" frameborder="0" allowfullscreen></iframe>
</div>

そして、CSSでは以下のように指定します。

.youtube iframe {
  width: 100%;
}

これで、横方向に対してレスポンシブ対応ができます。

YouTube動画の埋め込みをレスポンシブ対応にする方法(完全対応編)

上記の方法では、縦方向に対してレスポンシブ対応になっていません。
そこで、縦方向も対策する必要があるのですが…。
その対策済みのCSSは以下のようになります。
基本的には、こちらの方法で設定しておくと良いのではないでしょうか。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

ちなみに、このCSSの設定方法は以下の記事を参考にさせていただきました。

WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法 | HTML5でサイトをつくろう

YouTube動画の埋め込みテスト

試しに、YouTube動画を実際に埋め込んでみました。
スマホで見ても、きちんとレスポンシブ対応になっていることが確認できますよね。
あっ、ついでに動画もぜひ視聴してください！

ひとこと

今回の記事では、埋め込まれたYouTube動画をレスポンシブ対応にする方法について書いてみました。
基本的にはCSSで設定するだけですので、非常にお手軽にできますよね。

ブログ記事にYouTubeの動画をよく埋め込むという方は…。
ぜひこの設定をしておくことをおすすめします。