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

Question

我正在使用 Bootstrap，想知道是否可以将视频嵌入背景但填充整个屏幕，就像处理图像一样，在调整大小时居中但始终全屏。

我表达自己很糟糕，所以我准备了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 的东西。当您调整窗口大小时，视频会适应填充屏幕，无论水平方向它只显示视频的一部分。这是用“视频”标签完成的，我正在使用“iframe”标签。

Answer 1

感谢tubular，我成功了。

你只需要在你的body中添加一个id为“wrapper”的div标签，并在js中调用它们的函数：

HTML

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

JS

$().ready(function() {
  $('#wrapper').tubular({videoId: 'idOfYourVideo'}); // where idOfYourVideo is the YouTube ID.
});

Answer 2

以这种方式测试。

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