如何创建全宽背景视频（Vimeo）？在 Bootstrap 环境中答案

【问题标题】：How to create a full width background video(Vimeo)? in Bootstrap environment如何创建全宽背景视频（Vimeo）？在 Bootstrap 环境中
【发布时间】：2015-05-19 22:18:59
【问题描述】：

是否有无边框全宽视频的解决方案/教程？

我查看了一个现有的解决方案： Full-width vimeo wrapper background

我试过了，但是当我缩放到不同的视口大小时，我得到了不需要的（黑色）边框。

 <div class="video">    

 <iframe src="https://player.vimeo.com/video/120893740?title=0&     amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="960" height="600" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
 <div
 class="overlay">
   <h1>HEADING HERE</h1>
   <p>Content Here</p>

 </div> 

 </div>

CSS：

    body {
    margin: 0;
    padding: 0;
}

h1, p {
     text-align: center
}
.video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%}

    .video iframe {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    }

.video .overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    }

提前致谢

【问题讨论】：

您想让视频填满整个页面吗？或者您只是希望大小保持不变但没有黑框？？
也许可以让你在 .overlay 中的背景完全透明？

标签： html css twitter-bootstrap

【解决方案1】：

从您的 iframe 标记中删除内联 width="960" height="600" 看看是否有帮助

【讨论】：

我从 iframe 中删除了宽度和高度。没有运气。不过还是谢谢。