全屏响应式嵌入式背景视频

时间:2015-05-06 17:40:56

标签: twitter-bootstrap-3 responsive-design fullscreen embedded-video

我正在使用Bootstrap并且想知道你是否可以将视频作为背景嵌入但是填满整个屏幕,就像你对图像一样,在调整大小时将其居中,但总是全屏。< / p>

我非常表达自己,所以我已经准备好了this,以便你看到我想要的东西。

现在,我尝试使用embedded video做同样的事情,但我不知道该怎么做。

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%;
}

更新

我希望获得类似this的内容。当您调整窗口大小时,视频将适合填充屏幕,无论是横向还是仅显示视频的一部分。这已经完成了&#39;视频&#39;标签,我使用的是iframe&#39;之一。

2 个答案:

答案 0 :(得分:1)

由于tubular,我设法做到了。

你只需要在你的身体中添加一个带有id&#34;包装&#34;的div标签。并在js中调用它们的函数:

<强> HTML

true

<强> JS

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

答案 1 :(得分:0)

以这种方式测试。

<强> HTML

matched = np.array(list(set(arrays[0]).intersection(*arrays[1:])))

<强> 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="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>