前提・実現したいこと
レスポンシブ(ただし最大値を指定)したyoutubeの埋め込み動画の下に異常なスペースができてしまうのを改善したい
発生している問題
ワードプレスで作ったサイトにyoutubeを埋め込んでいます。 ※レスポンシブ(ただし最大値指定) 動画の下に、異常にスペースができてしまいます(約180px) 「max-height」の指定をしなければどうやらなおります。 高さ指定が間違っていますでしょうか? 下記コードを添削いただけると助かります。
該当のソースコード
▼html <div class="youtube"> <iframe src="ゆーちゅーぶあどれすrel=0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> ▼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 {
に入れたところ、高さが指定できたのですが、
今度は質問のとおり、動画の下に、異常な空白ができてしまって困っています
回答1件
あなたの回答
tips
プレビュー