1

私は Bootstrap を使用していますが、ビデオを背景として埋め込むことができるかどうか疑問に思っていましたが、画像の場合と同じように画面全体を埋め、サイズ変更時に画像を中央に配置しますが、常に全画面表示にします。

私は自分自身を表現するのがとても下手なので、私が何を得たいのかを理解してもらうためにこれを用意しました。

今、埋め込みビデオで同じことをしようとしていますが、その方法がわかりません。

HTML

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
<div class="embed-responsive embed-responsive-16by9">
    <div id="background">
       <iframe id='player' width="2500" height="1406" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe>
    </div>
</div>          
</div>

CSS

#background {
    position: absolute;
    top:0;
    left:0;
    z-index: -999;
    width: 100%;
    height: 100%;
}

アップデート

このようなものを手に入れたいです。ウィンドウのサイズを変更すると、水平方向にビデオの一部しか表示されない場合でも、ビデオは画面いっぱいに表示されます。それは「video」タグで行われました。私は「iframe」タグを使用しています。

4

2 に答える 2

1

チューブラーのおかげでなんとかできました。

ID「wrapper」の div タグをボディに追加し、js でそれらの関数を呼び出すだけです。

HTML

<div id="wrapper"></div>

JS

$().ready(function() {
  $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});
于 2015-05-06T23:28:44.993 に答える
0

このようにテストします。

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container-fluid">
    <div class="embed-responsive embed-responsive-16by9">
        <div id="background">
           <iframe id='player' width="100%" height="100%" src="https://www.youtube.com/embed/Rk6_hdRtJOE?rel=0&amp;controls=0&amp;showinfo=0&amp;autoplay=1&amp;loop=1&amp;playlist=Rk6_hdRtJOE&amp;enablejsapi=1&version=3" frameborder="0"></iframe>
        </div>
    </div>          
</div>

CSS

html, body{ height: 100%; margin: 0; padding: 0;}
#background {
    position: absolute;
    top:0;
    left:0;
    z-index: -999;
    width: 100%;
    height: 100%;
}
.container-fluid{margin: 0; padding: 0; height: 100%;}
.embed-responsive{height: 100%;}
于 2015-05-06T18:19:41.990 に答える