web-dev-qa-db-ja.com

レスポンシブビデオの最大幅

私はビデオ埋め込みが反応するのを助けるいくつかのコードを見つけました： http://alxmedia.se/code/2013/10/make-wordpress-default-video-embeds-responsive/

問題はコードではなく、コードがうまく機能していることです。ライブサンプルはこちらでご覧になれます。 http://joshrodg.com/hall/ - これは開発中です。下にスクロールしてビデオをチェックしてください:-)

私がやりたいことはmax-widthを設定することです。現在のdivにmax-widthを設定すると、ビデオが切り落とされ、上下に黒いバーが表示されます。アスペクト比を維持しながらmax-widthを設定する方法があったら私はそれが大好きです。ビデオは100％の幅でそれを残すには余りにも大きいです...私は600pxのようなものだと思っていましたが、それでもすべてが反応するように小さいスクリーンで拡大縮小します。

私が使用している現在のコードは、元のソースからわずかに調整されています。

関数：

function video_embed( $html ) {
    return '<div class="video-wrap">' . $html . '</div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

CSS：

.video-wrap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}

.video-wrap iframe,
.video-wrap object,
.video-wrap embed,
.video-wrap video {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

生成された出力：

<div class="video-wrap">
    <iframe width="500" height="281" src="https://www.youtube.com/embed/hevFL7CiUx4?feature=oembed" frameborder="0" allowfullscreen=""></iframe>
</div>
responsivevideosiframe
1
Josh Rodgers

だから、どうやら私は私の質問を投稿する前にもう少し読む必要がありました。

私が質問を投稿した後、私は遭遇しました： https://moodle.org/mod/forum/discuss.php?d=258650 、それは私が使っていたコードに組み込んだものです。

私は自分の関数を以下のように修正しました：

function video_embed( $html ) {
    return '<div class="video-container"><div class="video-wrap">' . $html . '</div></div>';
}
add_filter( 'embed_oembed_html', 'video_embed', 10, 3 );

私は次のCSSを追加しました：

.video-container {
    max-width: 400px;
}

それで、私がしたのはvideo-containerを指定したvideo-wrap divをラップするmax-width divを追加することでした。

私はすべての異なる幅を試してみましたが、そのすべてが現在機能しています:-)

1
Josh Rodgers