YouTubeやGoogle Maps等の埋込みをレスポンシブWEBデザインに対応にする

YouTubeやGoogle Maps等の埋込みコードを貼り付けたページをスマートフォンのブラウザで見ると幅が調整されずにはみ出ることがあります。CSSでiframeを指定することでレスポンシブデザイン対応にさせることが出来ます。CSS3のメディアクエリで幅667px(iPhone6sの横長表示)までの指定にしそれ以下の幅のウインドウでiframeは、幅100%、高さ75%で表示するように指定します。

@media screen and (max-width: 667px) {
    iframe {
        max-width: 100%;
        max-height: 75vh;
    }
}
Posted in CSS