owned mediaウェブ制作に役立つコンテンツを発信中!

YouTubeなどの動画インラインフレームをレスポンシブ対応にする

タイトルの通りですが、たまにクライアントワークで登場するので備忘録としてメモ。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対応にさせる方法
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram