I am trying to create a full-width iframe vimeo background covered by a pattern located in my body div. The video is covered by an overlay so it becomes unclickable. Ive tried g
You need to set the width and height of the iframe as well as its wrapper. I've also added some z-indexes for luck!
Hey diddle diddle, here is a fiddle: 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;
}
This solution replicates the css property background-size: cover
, using an iframe instead of an image, in full CSS.
First, put your vimeo iframe in a wrapper:
<div class="iframe-wrapper">
<iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1&byline=0&title=0">
</div>
Then apply those styles:
/* 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%);
}
In addition, in the case of Vimeo, a pro account gives you the ability to remove the player's controls.