[YouTube] iframeのレスポンシブ対応

iframeをレスポンシブ対応した時のメモです。
今回はYouTubeを使用例として。

HTML

<div class="frame-wrapper__video">
  <iframe src="https://www.youtube.com/hoge/hogehogehogehogehoge" frameborder="0" allowfullscreen></iframe>
</div>

• YouTubeから取得したiframeを div で囲う。

CSS

.frame-wrapper__video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 50px;
}

.frame-wrapper__video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

• 4:3の場合 padding-bottom: 75%;
• 16:9の場合 padding-bottom: 56.25%;
• padding-bottomはpadding-topでも可。

サンプル

表示サンプルは下記で確認できます。

GitHub Pages

GitHubリポジトリ

参考

CSSだけでどんな画像でも4:3や16:9の比率を維持して配置する方法