CSS を使用して Elastic Video HTML5 ケースを実装する practice_html5 チュートリアル スキル

Elemin Theme (最近デザインしたレスポンシブ サイト) をコーディングしていたときに、埋め込みビデオのサイズ変更をより柔軟に行う方法でフレーム スキップに遭遇しました。 max-width:100% と height:auto を使用すると、HTML5 ビデオ タグは適切に機能しますが、この解決策は iframe またはオブジェクト タグのインライン コードでは機能しません。何時間もの検索と実験を経て、ついに解決策を見つけました。この CSS トリックは、レスポンシブ デザインを行うときに役立ちます。

柔軟な html5 ビデオタグ
html5 ビデオを使用する場合、max-width:100% を設定することで柔軟にすることができます。前回の紹介で、一般的に使用される iframe やオブジェクトの埋め込みコードには適さないと述べました。

コードをコピーします

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

video {
max -width: 100%;
height: auto;
}

フレキシブル オブジェクトと Iframe 埋め込みビデオ
このトリックは非常に簡単です。

コンテナを追加し、div の padding-bottom 属性値を 50% から 60% の間に設定します。次に、子要素 (iframe または object) の幅と高さを 100% に設定し、絶対配置を使用します。これにより、埋め込まれたオブジェクトが自動的に最大サイズまで拡張されます。
CSS

コードをコピー

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

.video-container {
位置: 相対;
パディング-トップ: 30px;
オーバーフロー: 非表示; 🎜>}
.video-container iframe,
.video-container オブジェクト,
.video-container embed {
position: 絶対;
left: 0; ;
幅: 100%;
高さ:
}

コードをコピーします

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

🎜>

固定幅での柔軟性

ビデオの幅が制限されている場合は、ラップする追加の

コンテナが必要です。ビデオを作成し、div の固定幅と max-width:100% を設定します。
CSS

コードをコピー


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

.video -wrapper { 幅: 600px; 最大幅: 100% }

HTML

コードをコピー


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

-wrapper -->

互換性

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