現在、携帯電話を使用して Web を閲覧する人が増えているため、Web サイトの応答性がますます重要になっています。モバイルでサイトをテストしている間、iframe の高さを適応できるようにする優れた CSS トリックを発見するまで、ビデオが期待どおりに動作しない理由を理解するのに多くの努力が必要でした。次に、iframe のカスタム高さを動的に実現する方法を紹介します。興味のある方は参考にしてください。
iframe アダプティブ高さ
デモの目的で、この記事では iframe に埋め込まれたビデオを使用します。まず、ビデオの URL にアクセスし、ビデオの下にある [共有] をクリックして、[埋め込み] をクリックします。具体的なコードは次のとおりです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
次に、width="560" height=" を削除する必要があります。 315"、ここで iframe のサイズを設定するためです。寸法を自分で設定する必要があるため、これを行う必要はありません。
CSS
を使用した後、別の HTML 要素の
<div class="resp-container">
<iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>次のスタイルを使用してラッパー クラスを定義します。
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}position: ここでは相対位置と iframe 位置が非常に重要です。後で iframe をラッピング要素に関連付けることができるように、position:relative にします。これは、CSS では、position:Absolute が最も近い非静的親要素に基づいて要素を配置するためです。
overflow: hidden コンテナの外に配置される要素を非表示にするかどうか。
padding-top: 56.25% これが鍵です。 CSS では、padding-top プロパティをパーセンテージに設定して、iframe を正しい比率に保つことができます。パーセンテージを使用すると、要素の幅に基づいて使用するパディングが計算されます。この例では、56.26% の比率を維持したいと考えていますが、他の比率も同様に使用できます。
iframe クラスを次のように定義します。
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}position:Absolute; これにより、iframe にラッパーに対する相対位置が与えられ、ラッパーのパディング上に配置されます。
top: 0 と left: 0 は、iframe をコンテナーの中央に配置するために使用されます。
width: 100% と height: 100% では、IFRAME がラップされたすべてのスペースを占めます。
完了すると、応答性の高い iframe が得られるはずです。
要約: この記事では、iframe が適応的な高さを実現できるようにする手法について見てきました。ご覧のとおり、実際には非常に簡単なので、この投稿が何時間もかかる手間を省いてくれることを願っています。
[関連チュートリアルの推奨事項]