youtubeなどの埋め込みタグのレスポンジブ対応について

割と既出な案件だがメモも兼ねてつらつらと。

youtubeやニコニコなどの動画埋め込みタグはiframeを使っている。
動画を埋め込んだページでブラウザを伸縮するとiframeの幅は一緒に伸縮するが高さがそのままだったりしてレイアウトが崩れてしまうことがあるだろう。
つくづくこのiframeは曲者だ。

iframeのアスペクト比を16:9などに合わせpaddingで調節することで解決できる。
iframe自体は適当なdivを親要素としpositionで固定化させると良い。

youtube例

<style>
.moveItem {
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}
.moveItem > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<div class="moveItem">
<!-- 以下youtubeの埋め込みタグ -->
<iframe src="https://www.youtube.com/embed/vI4LHl4yFuo" width="854" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

埋め込みタグ表示例
※ブラウザを伸縮してみて下さい

move：YUI「Summer Song – short ver」

- シェア -

いいね: