タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。YouTubeなどの動画に限らず、アスペクト比が16：9のワイドになっているインラインフレームに使えるかと思います。コードは以下のとおり。 【HTML】※一部省略

<div class="yt-responsive">
  <iframe src="**********" frameborder="0" allowfullscreen></iframe>
</div>

  【CSS】

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

  過去記事で「インラインのグーグルマップをレスポンシブ対応にする」にも似たような形で紹介しましたが、ここではpadding-topの値を調整することで、アスペクト比に合わせています。4：3などの場合は適宜変更します。   （参考にさせて頂いたサイト） WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法