ウェブレスポンシブレイアウトにおけるiframe適応の方法

問題<br />レスポンシブレイアウトでは、iframe 要素に注意する必要があります。iframe 要素の width 属性と height 属性は、その幅と高さを設定しますが、包含ブロックの幅または高さが iframe の幅または高さよりも小さい場合、iframe 要素はオーバーフローします。

このようなオーバーフローした iframe はページのレイアウトを破壊します。 iframe 要素をレスポンシブにする方法も見つかると思いますので、お楽しみに。

回避策
iframe 要素自体は、その幅が js 経由で明示的に設定されない限り、伸縮できません。ただし、iframe を iframe-container 要素でラップし、iframe-container 要素の幅を包含ブロックの幅に合わせて、iframe のアスペクト比に応じて iframe-container 要素の padding-bottom パーセンテージを設定することができます。

実際、この方法の本質は、iframe-container 要素の padding-bottom 属性を設定することにあります。この属性を設定する目的は、要素の高さを偽装して設定することです。 padding-bottom のパーセンテージ設定は、親要素の幅を基準にするためです。height 属性にパーセンテージを設定すると、親要素の高さを基準に設定されます。通常、親要素の高さの値にはデフォルトの auto を使用するため、子要素の高さも 0 になります。そのため、padding-bottom にのみ属性を設定できます。この方法では、iframe 要素が iframe コンテナーを埋めるようにします。

コードをコピー

コードは次のとおりです。

。包む{
幅: 400ピクセル;
マージン: 自動;
境界線: 5px 実線緑黄色;
}
.iframe コンテナ{
高さ: 0;
パディングボトム: 97.6%;
位置: 相対的;
}
.iframe-コンテナ iframe{
位置: 絶対;
左: 0;
上: 0;
幅: 100%;
高さ: 100%;
}
@media スクリーンと (最大幅: 400px) {
。包む{
幅: 300ピクセル;
}
}

コードをコピー

コードは次のとおりです。

<div class="wrap">
<div class="iframe-container">
<iframe height=498 width=510 src="<a href="http://player.youku.com/embed/XOTE0MjkyODgw">http://player.youku.com/embed/XOTE0MjkyODgw</a>" frameborder=0 allowfullscreen></iframe>
</div>
</div>

結果にはステータスが表示されます:

ビューポートの幅が 400 ピクセルより大きい場合: