Full-Breite Vimeo Wrapper Hintergrund

Question

Ich versuche, eine vollständige Breite Iframe Vimeo Hintergrund durch ein Muster in meinem Körper div abgedeckt zu schaffen. Das Video wird von einem Overlay abgedeckt, sodass es nicht mehr durch Klicken angezeigt werden kann. Ich habe versucht, dem Video 100% Breite und Höhe zu geben, aber kein Glück, den Bildschirm abzudecken. Ich versuche, die Videos bei 500x250 px erscheinen zu lassen.

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

Sie müssen die Breite und Höhe des iframe sowie der Verpackung setzen. Ich habe auch einige Z-Indizes für Glück hinzugefügt!

Hey Diddle Diddle, hier ist eine Geige: 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

Diese Lösung bildet die CSS-Eigenschaft background-size: cover, ein iframe anstelle eines Bildes unter Verwendung des vollständig CSS.

Zuerst legen Sie Ihre vimeo iframe in eine Hülle:

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

Dann diese Stile anwenden:

/* 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%); 
} 

Außerdem im Fall von Vimeo, ein pro Konto gibt Ihnen die Fähigkeit, die Steuerelemente des Spielers zu entfernen.