search
LoginSignup
24

More than 5 years have passed since last update.

posted at

[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-bottompadding-topでも可。

サンプル

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

GitHub Pages

GitHubリポジトリ

参考

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
24