YouTube の埋め込みタグは、タテヨコのサイズが html 指定。そのためサイトデザインと合わず、大きすぎたり小さすぎたりする。そこでスタイルシートでレスポンシブ対応。まずは、デモ動画。
- とりあえず横幅がフィットすれば良い場合
- スタイルシートに
iframe{width:100%;}と指定。 - 条件：iframe を他で未使用。上下方向の余白表示が不自然。
- スタイルシートに
- 完璧なレスポンシブ対応をしたい場合
- スタイルシートで position を指定。下記参照
- 毎回
<div class="youtube"> YouTube 埋め込みタグ</div>と指定。
.youtube{
position:relative;
width:100%;
padding-top:56.25%;
}
.youtube iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}
スタイルシートの position プロパティは、ボックスの配置方法（基準位置）が相対か絶対かを指定。位置そのものは、top,right,left,bottom で基準位置からの距離で指定（directiion の値で優先関係あり）。
- static：初期値。配置方法を指定せず、top, right なども適用されず。
- relative：相対位置。初期配置位置が基準位置。
- absolute：絶対位置。ウィンドウの左上が初期基準位置。static 以外が指定されてる直近の祖先ボックス左上が基準位置。
- fixed：スクロールしても位置固定の絶対位置。
div.youtube は、iframe を表示させるための空箱。iframe は、スマホ や ＰＣ で表示位置やサイズが変わる。その基準位置を指定するために div.youtume に relative 指定。また div.youtube > iframe に absolute 指定することで基準位置を div.youtube の表示位置に。
div.youtube は、 width:100%; で親ボックスの横幅一杯に、padding-top:56.25%; で上端から %分オフセットされた位置に入れ子がくるボックスが設定されたことになる。ただし div.youtubu の入れ子である iframe は、 div.youtube が position:relative; を指定された時に作られた新たなボックスに表示される。このため div.youtube は、余白のみをもった横線が実態。その余白の上に iframe が表示される。
また 56.25% は、HD の横縦比 16:9 ( 9÷16=0.5625 ) からきたものと思われる。つまり div.youtube は width:100%; と padding-top:56.25%; で 16:9 の領域を確保。height だと親ボックスの 56.25% になり必ずしもこの比にならない。
div.youtube > iframe は absolute 指定されてるので、その基準位置である親ボックス div.youtube の左上から top:0; right:0; つまり上辺と右辺が接する位置に width:100%; height:100%; で領域いっぱいに表示される。left:0; でも良い気はするが、参考ページでは right で指定している。その意図は不明。
言葉だけで説明するのは、ムズいな。。
参考ページ
コメントを残す