質問: ### 前提・実現したいこと レスポンシブ(ただし最大値を指定)したyoutubeの埋め込み動画の下に異常なスペースができてしまうのを改善したい ![実際の画像](https://teratail.storage.googleapis.com/uploads/contributed_images/8385cf83f59f40658393e33952d6439c.png) ### 発生している問題 ``` ワードプレスで作ったサイトにyoutubeを埋め込んでいます。 ※レスポンシブ(ただし最大値指定) 動画の下に、異常にスペースができてしまいます(約180px) 「max-height」の指定をしなければどうやらなおります。 高さ指定が間違っていますでしょうか? 下記コードを添削いただけると助かります。 ``` ### 該当のソースコード ``` ▼html ▼CSS /*YouTubeレスポンシブサイズ*/ .youtube { position: relative; max-width: 560px; width: 100%; padding-top: 56.25%; } .youtube iframe { position: absolute; top: 0; right: 0; width: 100%; max-height: 315px; height: 100%; } ``` ### 試したこと 普通にレスポンシブだけ(「max-width」「max-height」の記述なし)だと問題ないようです。 「max-height」を .youtube {~うんぬん の方に入れると高さが指定されませんでした。 よくわからないまま .youtube iframe { に入れたところ、高さが指定できたのですが、 今度は質問のとおり、動画の下に、異常な空白ができてしまって困っています
回答: CSSの設定を見直すと良いかもです。とりあえずこれではどうでしょうか? ``` .youtube { position:relative; width: 100%; max-width: 560px; } .youtube::before { content: ""; display: block; width: 100%; padding-top: 56.25%; } .youtube iframe{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; } ``` ご提示のCSSコードでの空白部分の原因は、「余分な高さが発生」しているためです。ご提示のコード「.youtube」に背景色を付けると分かりやすいかと思います。 参考リンク [CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック