Twitter bootstrap 3 响应嵌入式背景视频全屏

我正在使用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>

<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>

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

更新

我想买点像这样的东西。调整窗口大小时，视频将调整为填充屏幕，无论它在水平方向上是否仅显示视频的一部分。这是用“视频”标签完成的，我用的是“iframe”标签。

这样测试

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>

<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>

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

---

多亏了我的努力，我成功地做到了

您只需在身体中添加一个id为“wrapper”的div标记，并在js中调用它们的函数：

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>

<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>

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

---

完全一样。在JSFIDLE中尝试，复制代码，您将看到。不过，感谢您的尝试。我想要的是，当您调整大小时，由于视频和窗口的像素不必相同，视频必须以部分宽度显示，但始终以100%高度显示。酷！我贴的例子不一样，这是你的问题，因为在顶部和底部的黑条由于视频的分辨率。但现在我知道你想要的，视频内容高度100%……真的，视频内容全屏