HTML5 の実践 - CSS を使用した柔軟なビデオのコード共有

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

柔軟なhtml5ビデオタグ（デモ）

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

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

Flexible Object & Iframe 埋め込みビデオ

この手法は非常に簡単で、ビデオに e388a4556c0f65e1904146cc1a846bee コンテナを追加し、p の Padding-bottom 属性 の値を 50% から 60 に設定する必要があります。 ％ 間。次に、子要素 (ifame または object) の幅と高さを 100% に設定し、絶対配置を使用します。これにより、埋め込まれたオブジェクトが自動的に最大サイズまで拡張されます。

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<p class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></p>

固定幅での柔軟性

ビデオの幅が制限されている場合、ビデオをラップして p に固定幅を設定する追加のコンテナが必要です。最大幅:100%。

CSS

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

HTML

<p class="video-wrapper">
    <p class="video-container">
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </p>
    <!-- /video --></p><!-- /video-wrapper -->

互換性

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

以上がHTML5 の実践 - CSS を使用した柔軟なビデオのコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。