CSSを使用して、弾性ビデオHTML5ケースプラクティスを実装します

著者：Eve Cole 更新時間：2025-04-26 13:32:01

コメント：エレミンのテーマ（最近設計したレスポンシブサイト）をエンコードしたとき、私が遭遇したフレームスキップの1つは、埋め込みビデオをサイズの変更でより柔軟にする方法でした。データと実験を何時間も検索することで、私はついに解決策を見つけました

エレミンのテーマ（最近設計したレスポンシブサイト）をエンコードしたとき、私が遭遇したフレームスキップの1つは、埋め込みビデオをサイズの変更でより柔軟にする方法でした。最大幅の使用：100％およびheight：autoはHTML5ビデオタグをうまく機能させることができますが、このソリューションはiframeまたはオブジェクトタグのインラインコードでは機能しません。数時間のデータと実験を検索した後、最終的に解決策を見つけました。このCSSテクニックは、レスポンシブデザインを行っているときに役立ちます。

柔軟なHTML5ビデオタグ

HTML5のビデオを使用して、Max-Width：100％を設定することで柔軟にすることができます。前の紹介では、オブジェクトに一般的に使用されるIFRAMEおよび埋め込みコードには適用されないことが言及されています。

ビデオ {

最大幅：100％;

高さ：自動;

}

柔軟なオブジェクトとiframe埋め込みビデオ

このトリックは非常に簡単です。ビデオに<div>コンテナを追加し、50％から60％のdivのパディングボトムプロパティ値を設定する必要があります。次に、子要素の幅と高さ（IFAMEまたはオブジェクト）を100％に設定し、絶対的なポジショニングを使用します。これにより、埋め込まれたオブジェクトが自動的に最大に拡張されます。

CSS

.video-container {

位置：相対;

パディングボトム：56.25％;

パディングトップ：30px;

高さ：0;

オーバーフロー：隠し;

}

.video-container iframe、

.video-containerオブジェクト、

.video-container embed {

位置：絶対;

上：0;

左：0;

幅：100％;

高さ：100％;

}

HTML

<div>

</div>

固定幅で柔軟性を達成します

ビデオ幅が制限されている場合は、ビデオをラップして固定幅と最大幅を設定するために追加の<div>コンテナが必要です。

CSS

.video-wrapper {

幅：600px;

最大幅：100％;

}

HTML

<div>

</div>

<！ - /video->

</div>

<！ - /video-wrapper->

互換性

このトリックは、Chrome、Safari、Firefox、Internet Explorer、Opera、iPhone、iPadなど、すべてのブラウザーをサポートしています。