Полный обертка vimeo background

Question

Я пытаюсь создать полноэкранный iframe vimeo фон, покрытый шаблоном, расположенным в моем теле div. Видео покрывается наложением, поэтому оно становится незаметным. Ive попытался дать видео 100% ширину и высоту, но не повезло прикрывать экран. Я пытаюсь, чтобы видео всплывало при 500x250 px.

Html

<div class="video">  
    <iframe src="//player.vimeo.com/video/82123812?title=0&amp;byline=0&amp;portrait=0&amp;color=3a6774&amp;autoplay=1&amp;loop=1" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 
    <div class="overlay"></div> 
</div> 

CSS

.video { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100% 
} 

.video .overlay { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: url(../img/overlay-pattern.png) repeat; 
} 

Answer 1

Вы должны установить ширину и высоту фрейма, а также его обертку. Я также добавил некоторые z-индексы для удачи!

Эй надувать надувать, вот скрипку: http://jsfiddle.net/n28Ef/1/

.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: url(../img/overlay-pattern.png) repeat; 
} 

Answer 2

Это решение повторяет свойство CSS background-size: cover, используя IFRAME вместо изображения, в полном CSS.

Во-первыхи, поставить Vimeo IFRAME в обертке:

<div class="iframe-wrapper"> 
    <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0"> 
</div> 

Затем примените эти стили:

/* Makes a fixed background wrapper 
which the user cannot interact with */ 

.iframe-wrapper { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    pointer-events: none; 
    overflow: hidden; 
} 

/* Make the iframe keep an aspect ratio, and 
position it in the middle of its parent wrapper*/ 

.iframe-wrapper iframe { 
    width: 100vw; 
    height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ 
    min-height: 100vh; 
    min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Кроме того, в случае Vimeo, про счетов дают вам способность удалять элементы управления игрока.