html - フレームでレスポンシブビデオを作成する方法は?

Question

私はクライアントのウェブサイトのレスポンシブバージョンに取り組んでおり、この問題に遭遇しました-ブラウザウィンドウを小さくすると、YouTubeビデオが中央に配置されません-パディング右: 10px; は無視されます - なぜですか?

どうすれば修正できますか？

YouTube ビデオの周囲の境界線に使用する CSS は次のとおりです。

padding: 10px;
position: relative;
overflow: hidden;

Answer 1

ビデオのサイズが正しく変更されない理由は、使用している埋め込みコードが原因である可能性があります。これは通常、<iframe>要素の正確なサイズを指定するため、レイアウトの変更やサイズ変更イベントに対して応答しなくなります。

まさにそれを行う気の利いたjQueryプラグインがあります - http://fitvidsjs.com/

または、いつでも独自の単純な jQuery 関数を作成できます (ここでフィドルを参照してください) :)

$(document).ready(function() {
    var $w = $(window),
        $vids = $("iframe[src*='youtube'], iframe[src*='vimeo']");

    // Store video aspect ratio
    $vids.each(function() {
        var aspectRatio = $(this).width() / $(this).height();
        $(this).attr("data-aspect-ratio", aspectRatio);
    });

    $w.resize(function() {
        // Set video width fluidly
        $vids.each(function() {
           $(this).width($(this).parent().width()); 
           $(this).height(Math.floor($(this).width() / $(this).data("aspect-ratio")));
        });
    }).resize();
});

同じページにあまりにも多くのビデオがあり、ページのサイズを変更すると、 resize() のチェーンが発生するため、サイズ変更機能を抑制またはデバウンスすることをお勧めします (こちらのリンクを参照)。ブラウザのパフォーマンスに影響を与えます。

Answer 2

なぜあなたは入れoverflow: hidden;ますか？

div を使用して要素を中央に配置します。たとえば、次のようにします。

#video
{

    width: 300px;
    height: 250px;
}
#main_video
{
    padding: 10px;
    margin: 0 auto;
}

<div id="main_video">
<div id="video">
    [example]
</div>
</div>