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

このエントリーをはてなブックマークに追加

Youtube の埋め込みをレスポンシブ対応のページにそのまま入れようとしても、可変になってくれないという問題がでてきます。

レスポンシブ対応する方法について、毎回調べてしまっていたので、メモとしてエントリーしておきます。

Youtubeの埋め込みをレスポンシブ対応するCSS：条件付き

2014年8月19日時点での埋め込みコードをレスポンシブ対応するには、以下のようにしておくだけです。

HTML

<div class="youtube">
  〜埋め込みコード〜
</div>

CSS

.youtube iframe{
  width: 100%;
}

デモ

利用条件

実はこの方法には気をつけるポイントが潜んでいます。コンテンツ幅サイズ以上のiflameのサイズ指定をしておく必要がある点です。

上のデモでは、以下のHTMLになっています。

<div class="youtube">
  <iframe width="853" height="480" src="//www.youtube.com/embed/d6SSnbVCmEg" frameborder="0" allowfullscreen></iframe>
</div>

2014年8月19日現在、このブログ上では width が 862px ほどになっています。そのサイズに近いサイズがiframeのwidth属性とheight属性にはいっています。これ基準で動画を読み込みにいくため、小さいサイズをいれてしまっていると、width 100%にした際に縦がかなり短くなってしまいます。

そしてこのブログでの例では、縦が固定 480px で入っているために、縦のサイズは変わらないことになってしまいます。

デモ（アニメーションさせてみた）

縮んでも縦は変わらないのがわかると思います。

Youtubeの埋め込みをレスポンシブ対応するCSS：条件なし

そこで、縦も含めてサイズが変わるようにするスタイルの設定が必要になります。 参考ブログはないかと探してみると、paddingで対応するなんて方法が紹介されておりました。

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

参照先のCSS

.youtube2 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

縦もレスポンシブ改善されたデモ

ポイントは iframeの widthとheight属性を入れていてもCSSのほうが優先されるように、 !important がを入れているところ。

先ほど同様にアニメーションさせてみましょう。

縦も改善されたデモ（アニメーションさせてみた）

このスタイルであれば問題なくレスポンシブに対応された状態になります。

参照：