我正在使用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&controls=0&showinfo=0&autoplay=1&loop=1&playlist=Rk6_hdRtJOE&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;之一。
答案 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&controls=0&showinfo=0&autoplay=1&loop=1&playlist=Rk6_hdRtJOE&enablejsapi=1&version=3" frameborder="0"></iframe>
</div>
</div>
</div>