YouTubeやVimeoのiframeの埋め込み動画をCSSだけでレスポンシブに対応させる -『CSS』
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の動画のアスペクト比にレスポンシブに親ボックスが可変するようにheightとpadding-topでCSSを指定して、その親のボックスにiframeを絶対配置してサイズをフィットさせています。
以前のエントリーの応用といったところです。
