質問: youtubeの動画やgoogle mapをレスポンシブ表示するには下記CSSを書くと良いとあるのですが、いくつか質問があります 1htmlでiframeにwidthとheightを指定しているのにcssでも指定して良いのか?良い場合、どちらが優先されるのか? 2cssで.iframe-wrapperにheight:0;を指定しているのに、実際に表示すると高さが出るのはなぜか? 3横縦比を16:9にする為にcssで.iframe-wrapperにpadding-top: 56.25%;を指定しているそうなのですが、この指定でなぜ横100%、高さ56.25%となるのでしょうか? padding-top: 56.25%;を指定したらコンテンツエリアの上に56.25%の余白が出来るだけじゃないのでしょうか? 初心者なので的外れな質問かもしれませんがよろしくお願いいたします。 ``` ``` ``` .iframe-wrapper{ position: relative; height: 0; overflow: hidden; padding-top: 56.25%; } iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ```
回答: 1. CSS 2. padding-topが指定してあるので。 3. paddingの%指定は横幅を基準とするため、16:9で計算してみてください > > コンテンツエリアの上に56.25%の余白が出来るだけじゃないのでしょうか? > > > その余白の上にiframeを配置するテクニックです。 【CSSのpositionを総まとめ!absoluteやfixedの使い方は?】 【CSSのposition:「absolute」と「relative」とは | UX MILK】