HTML5 の実践 - CSS を使用した柔軟なビデオのコード共有-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-23 15:26:20

オリジナル

1686 人が閲覧しました

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 埋め込みビデオ

この手法は非常に簡単で、ビデオに

コンテナを追加し、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 -->

ログイン後にコピー