レスポンシブサイトにYoutube動画を埋め込んだ際の実装方法をご紹介します。

まずHTMLですが、前回記述したようにこのような埋め込みをします。

<div class="youtube">
  <iframe width="幅" height="高さ" src="https://www.youtube.com/embed/動画のID"></iframe>
</div>

そしてCSSは以下のように記述します。

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

これで解決です。