iframeの設定おぼえ書き

地図の埋め込みなどで使うiframeのcssについてメモ。

基本
iframe埋め込み

基本

iframe {
max-width: 100%;
max-height: 600px;
}

@media screen and (max-width:768px) {
iframe {
max-height: 350px;
}
}

heightをautoにしたりすると、妙に狭くなっったりして変になるので、max値を指定。

iframe埋め込み

ワードプレスのページに埋め込むときとかに使う書き方。

.access-body というのはiframeをラップしているdivタグについているクラスです。

.access-body {
position: relative;
width: 100%;
padding-top: 50%;/* = height ÷ width × 100 */
}

.access-body iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 500px) {
.access-body {
height: 320px;
}
}

absoluteで上記のように埋め込んでいる場合はiframeタグへ指定している内容が効かないようなので(iframe {max-height: 350px;}の部分)、
個別にモバイル時の高さを指定してあげます。