Youtube動画の埋め込みをレスポンシブ対応させる方法

ウェブ制作技術

おはようございます、ヒグチです。

イスにずっと座ってると尻の両サイドが痛み出します。
坐骨神経症かもしれません。
こちらのページを参考に、座ったままできる
ストレッチなどして、コンディションを整えています。

プログラミング

本日は、ウェブ制作の小技の話です。

ウェブページの制作の中でも、とてもポピュラーな実装、「Youtube動画の埋め込み」。
Youtubeが提供してくれる、埋め込み用のコードをコピペするだけです。
とてもカンタン。

でも、これをレスポンシブデザインにちゃんと対応させるとなると、ひねりが必要になります。
と言っても、CSSをちょっとだけこねるくらいです。

それではいってみましょう。

youtubeレスポンシブ対応

Yotube埋め込みのレスポンシブ対応

まずはサンプルを。

See the Pen Youtube埋め込みのレスポンシブ対応 by daisukehiguchi (@daisukehiguchi) on CodePen.

プログラミング

いい感じです。
ブラウザのウィンドウサイズを伸縮しても、縦横比を変えることなく収まってくれます。

コードについて少し

HTML

HTMLのポイントは、埋め込みのiframeを<div>タグで囲むことです。
ここでは yt_box というclass名をつけたdivタグで囲んでいます。

プログラミング

CSS

囲んだ親のdiv yt_box と、埋め込みのiframeにそれぞれスタイルを当てています。
親のdivに position:relative を指定し、子のiframeに position:absolute を指定することで、親divを基準にしたposition配置にしています。

ここでのポイントは親のdivに指定したpadding-bottom: 56.25%;の部分です。

56.25%がなんの数値かというと、縦横比 ヨコ16:タテ9 の場合、横幅100%に対するタテ幅分の値です。
これにより、つねに縦横比16:9が保たれます。


以上、Youtube埋め込みのレスポンシブ対応方法でした。
Youtube × レスポンシブ対応 というのは頻出する実装なので、覚えておきたいものです。使いどころがたくさんありそうです。

坐骨神経痛もこの調子で治していきたいものです。

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。