YouTubeやVimeoのiframeの埋め込み動画をCSSだけでレスポンシブに対応させる -『CSS』

table of contents

    YouTubeやVimeoのiframeの埋め込み動画をCSSだけでレスポンシブに対応させるtipsです。

    YouTubeやVimeoの埋め込み動画のレスポンシブ対応

    HTMLのsrc属性のexIDを任意のものに変更します。

    html


    <div class="movie"> <iframe src="//www.youtube.com/embed/exID?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div class="movie"> <iframe src="//player.vimeo.com/video/exID" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div>

    scss


    .movie { position: relative; height: 0; padding-top: 30px; padding-bottom: 56.25%; overflow: hidden; // > iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }

    iframeの動画のアスペクト比にレスポンシブに親ボックスが可変するようにheightpadding-topでCSSを指定して、その親のボックスにiframeを絶対配置してサイズをフィットさせています。

    以前のエントリーの応用といったところです。

    YouTubeやVimeoのiframeの埋め込み動画をCSSだけでレスポンシブに対応させる -『CSS』のアイキャッチ画像

    share

    related