youtube,googlemapのレスポンシブ表示の方法について

Question

youtubeの動画やgoogle mapをレスポンシブ表示するには下記CSSを書くと良いとあるのですが、いくつか質問があります

①htmlでiframeにwidthとheightを指定しているのにcssでも指定して良いのか？良い場合、どちらが優先されるのか？

②cssで.iframe-wrapperにheight:0;を指定しているのに、実際に表示すると高さが出るのはなぜか？

③横縦比を16:9にする為にcssで.iframe-wrapperにpadding-top: 56.25%;を指定しているそうなのですが、この指定でなぜ横100%、高さ56.25%となるのでしょうか？
padding-top: 56.25%;を指定したらコンテンツエリアの上に56.25%の余白が出来るだけじゃないのでしょうか？

初心者なので的外れな質問かもしれませんがよろしくお願いいたします。

<div class="iframe-wrapper">
    <iframe width="640" height="360" src="//www.youtube.com/embed/6Qk5Fc1Vdqk?rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>

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

Answer 1

「kei344」さんの回答どおりです。

少し補足すると以下の感じです。却って分かりにくい場合はスミマセン。
(^^;)

---

①についてはCSSが優先されます。「iframe」だけではなく、他の要素でも「width」と「height」の優先度は低いので、削除してもそのままでも良いです。

参考：参考先の記事は「img」の場合ですが、他の要素でも当てはまる場合が多いです。
width属性は優先度が低い

---

②③は関連していて

padding-top: 56.25%;を指定したらコンテンツエリアの上に56.25%の余白が出来るだけじゃないのでしょうか？

まさに、これを利用しています。

本来のコンテンツに該当する部分は高さが「0」です。しかし、そのコンテンツの上に「padding-top」で横幅に対する56.25％の高さ（領域）を確保しておき、position: absolute;で「iframe」を配置しているコードとなります。

レスポンシブにするバリエーションは、いくつかありますので検索して、理解しやすい使いやすいコードを試してみてください。

---

ちなみに「56.25%」は、16（横幅）：9（高さ）の比率から、「（9÷16）×100=56.25（%）」となり、「4：3」の比率では75％となります。

Comments

[tanakashouzoux]

わざわざコメントありがとうございます！
そういうテクニックだったんですね！！！

[yoshinavi]

公開してあるコード等を単純にコピペして使っても問題無ければ良いですが、内容を理解しておくと、修正が必要な場合に、その理由と応用が効くようになります。

解決されて何よりです。
(^^)

Answer 2

1. CSS
2. padding-topが指定してあるので。
3. paddingの%指定は横幅を基準とするため、16:9で計算してみてください

コンテンツエリアの上に56.25%の余白が出来るだけじゃないのでしょうか？

その余白の上にiframeを配置するテクニックです。

【CSSのpositionを総まとめ！absoluteやfixedの使い方は？】
https://saruwakakun.com/html-css/basic/relative-absolute-fixed

【CSSのposition:「absolute」と「relative」とは | UX MILK】
http://uxmilk.jp/63409

Comments

[tanakashouzoux]

わざわざご回答いただきありがとうございますm(__)m
理解出来ました！本当に助かりました！