youtubeとgooglemapのスマホ対応しよう
スマホでうまく埋め込みの「iframe」のサイズ指定がうまくできないのはあるある！対象方法を学ぼう！
なんでうまく制御できないのかな？
iframeは外部サイトの埋め込みです。
CSSで制御できるのはあくまで自分のサイトだけなので、特に高さの制御がうまくいかないんだね
でもご心配なく！次のコードの通りにすればちゃんと動作するよ！
このコードを実装すればOK
CSS
.map {
aspect-ratio: 4/3;
}
.map iframe {
width: 100%;
height: 100%;
}
.youtube {
aspect-ratio: 16/9;
}
.youtube iframe {
width: 100%;
height: 100%;
}
HTML
<div class="youtube"> <iframe width="560" height="315" src="https://www.youtube.com/embed/kWiuZ7vgnI8?si=Lk_lKX6Q6Xvsjg5z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div> <div class="map"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.48800840575!2d139.68914237571843!3d35.68960682258454!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188cd4b71a37a1%3A0xf1665c37f38661e8!2z5p2x5Lqs6YO95bqB!5e0!3m2!1sja!2sjp!4v1732782280996!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> </div>
Googleマップは「.map」
youtubeは「.youtube」
のdivで囲む必要があります。
→ 
上記のように、コードを追加すると正常化します。
コード解説
.map {
aspect-ratio: 4/3;
}
.map iframe {
width: 100%;
height: 100%;
}
Googleマップを囲む「.map」に「aspect-ratio: 4/3;」が指定されています。
これは要素のサイズ比率を4:3に保つ、というものです。
そして、中身の要素をその要素いっぱいに広げるという意味で「width: 100%;height: 100%;」の指定がしてあります。
youtubeの場合は動画のサイズはほとんどが「16:9」なのでその比率にあわせてあります。
googleマップの場合は正方形にしたい場合は
.map {
aspect-ratio: 1/1;
}
などに変えてあげるといいでしょう。メディクエリと組み合わせて、スマホサイズのみこの指定を有効にするというのもよいでしょう。
