スマホ対応する案件が増えるに連れ、YouTubeを横幅100%に対応させることも増えてきました。
その度に検索しにいっているので残して置こうと思います。
いつも参考にさせていただいてるのはこちらの記事。
■HTML
<div class="movie">
<iframe src="https://www.youtube.com/embed/XXXXXXXXXXX?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
■CSS
.movie {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; /* 現プレイヤーでは不要？ */
height: 0;
overflow: hidden;
}
.movie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
上記で簡単に実装できます。
レスポンシブなサイトを作る場合、PC表示では決まった width・height に背景画像を敷くだけで良かったものが、SP表示では横幅に合わせて可変させなければならない、という場面は多いと思います。
背景画像に合わせて高さを可変させることはできませんが、この指定を応用することで実装可能です。
上記のソースの padding-bottom に背景画像の縦の比率を入れ、背景画像と背景サイズの指定を加えます。
.movie {
position: relative;
padding-bottom: XXX%;
background: url(背景画像のパス);
background-size: 100%;
height: 0;
overflow: hidden;
}
