Как создать фоновое видео полной ширины (Vimeo)? в среде Bootstrap

Question

Есть ли решение/учебник для видео с полной шириной без границ?

Я посмотрел на существующее решение: 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); 
    } 

Заранее спасибо

Answer 1

Удалите встроенный width="960" height="600" из вашего IFrame тега и посмотреть, если это помогает