YouTubeやVimeoのiframeの埋め込み動画をCSSだけでレスポンシブに対応させるtipsです。

YouTubeやVimeoの埋め込み動画のレスポンシブ対応

HTMLのsrc属性のexIDを任意のものに変更します。

html

<div class="movie">
  <iframe src="//www.youtube.com/embed/exID?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

<div class="movie">
  <iframe src="//player.vimeo.com/video/exID" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

scss

.movie {
  position: relative;
  height: 0;
  padding-top: 30px;
  padding-bottom: 56.25%;
  overflow: hidden;
  //
  > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

iframeの動画のアスペクト比にレスポンシブに親ボックスが可変するようにheightとpadding-topでCSSを指定して、その親のボックスにiframeを絶対配置してサイズをフィットさせています。

以前のエントリーの応用といったところです。

• 背景画像の指定に多様したい、CSSで縦横比を維持してレスポンシブに対応する方法
• SVGをインラインで配置するとき、IEとandroidが高さを計算しないのに対応する