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

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram