すずろぐ

人生大逆転を目指す、鈴木俊吾の成長日記

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

YouTube

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

ちょっと質問ですが…。
あなたはブログ記事に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動画のサイズは480x270としています。
このサイズを変更したい場合には、最初にある「.youtube iframe」のwidthプロパティとheightプロパティを編集してください。

.youtube iframe {
  width: 480px;
  height: 270px;
}

@media screen and (max-width: 480px) {
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

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

このように指定しておくと…。
パソコンでは、480x270のサイズで動画が表示されます。
スマホでは、横幅いっぱいのサイズで動画が表示されます。

YouTube動画の埋め込みテスト

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

ひとこと

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

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