YouTube埋め込み動画（iframe）レスポンシブ対応

f:id:sumaho-design:20160406131220j:plain

このYouTube動画をページに埋め込みつつ、画面サイズに応じて、埋め込んだ動画のサイズも変わるようにしようと思い、単純に幅（width）だけ「100%」にしたけど、縦サイズが変な感じになって上手くいかなかったので調べてみました。

css

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

html

iframeの埋め込みコードを「class="youtube"」のdivで囲みつつ、cssで調整すれば、縦横いい感じになります。（class名は何でもいいです。埋め込みコード内の縦横サイズは、YouTubeの埋め込みコード画面で調整してください。）

今回の埋め込みについての参考サイト

どーでもいいですが、PiLの時もクールでいいですが、ピストルズの時のジョンライドンかっこいい。

勝手にスマホサイトまとめ｜スマホサイトとjQueryMobileのまとめ

勝手にリスティング広告まとめ｜テキスト・イメージ広告、ランディングページまとめ

勝手に諸々まとめ

主に広告とか、カッコいいクリエイティブとか、GTMとか、その他諸々気になったものまとめ

YouTube埋め込み動画（iframe）レスポンシブ対応