WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

YouTubeをレスポンシブデザインに対応させて埋め込む

HTML

<div class="movie">
  <iframe src="YouTubeの動画ソース"></iframe>
</div>

CSS

.movie {
  position: relative;
  width: 100%;
  //動画の縦横比
  padding-top: 縦幅 / 横幅 * 100;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

親要素にposition: relativeでiframeにposition: absolute

動画の縦横比を計算してpadding-topに設定する。