Youtubeを埋め込んでレスポンシブデザイン化を施すと、PC側での表示でYoutubeのフレームの大きさが大きくなる。

前提・実現したいこと

HPのページの中にYoutubeを埋め込んでいます。
このYoutubeをPCでの表示とスマホなどでのレスポンシブデザインに対応させたいと思っています。

発生している問題・エラーメッセージ

Youtubeのiframeのタグを埋め込んで表示できるようになりました。
最初はPC上でもアスペクト比も期待した状態で表示できるようになりました。

その後、レスポンシブデザインに対応するようにCSSに下記のようにソースコードを追加しました。
ところが、スマホ上ではきれいに表示されるようになりましたが、PC上ではフレームのサイズが
大きく表示されるようになり、アスペクト比も崩れるようになりました。

なお、このページにはGoogle Mapも埋め込んでいて、Youtubeの大きさがおかしくなるとGoogle Mapの方も
つられておかしくなるので共通の根本原因があるかもしれません。ただ、Google Mapの方は初期表示は
問題なく表示されています。画面の拡大縮小(Ctrl+'+'/'-')などをすると埋め込み画像のフレームが
拡大されたりします。

該当のソースコード

HTML
1        <div class="movie">
2            <iframe width="610" height="315" src="https://www.youtube.com/embed/NtjPlr_-W18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
3        </div>
4        <br>
5
6        <div class="gmap">
7            <iframe src="https://www.google.com/maps/d/u/0/embed?mid=17q3A0VOGQKuONQMZOPaJbXa4rsPkYNKx" width="610" height="480"></iframe>
8        </div>
9        <br>

CSS
1.movie {
2  position:relative;
3  max-width: 610px;
4  padding-top: 56.25%;
5}
6
7.movie iframe {
8  position: absolute;
9  top: 0;
10  right: 0;
11  width: 100%;
12  height: 100%;
13}
14
15.gmap {
16  position: relative;
17  max-width: 610px;
18  height: 0;
19  overflow: hidden;
20  padding-top: 56.25%;
21  
22}
23
24.gmap iframe {
25  position: absolute;
26  left: 0;
27  top: 0;
28  height: 100%;
29  width: 100%;
30}

試したこと

試しに、CSSに記述したレスポンシブデザインのソースコードを、すべてコメントしてみたところ
PC上でのYoutubeの表示の問題もなくなることを確認しました。

行動規範の内容に同意します

回答1件

ベストアンサー

max-widthとpadding-topを同じ要素に適用しているのが原因です。
padding-top: 56.25%は親要素の横幅の56.25%という意味です。
現状bodyが親要素に当たるので、max-widthで途中から横幅を固定しても、ウィンドウ広げ続けると、ビデオの高さは広がります。
親要素を作ってそちらにmax-widthを設定すれば良いと思います。

html
1<style>
2
3/*追加*/
4.movie_wrap{
5	max-width: 610px;
6}
7
8.movie {
9	/*max-width: 610px; 削除*/
10	position:relative;
11	padding-top: 56.25%;
12}
13</style>
14
15<div class="movie_wrap"><!--追加-->
16	<div class="movie">
17		<iframe width="610" height="315" src="https://www.youtube.com/embed/NtjPlr_-W18" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
18	</div>
19</div>