Vimeo iframe as background

Question

I going to make a website that has a video as a background.

I want to load the video from vimeo but I havent found the best way to put it fullscreen.

i´m trying to add a css to the iframe but it doesn´t work at all:

iframe{
     width: 100%;
     height: 100%;
}

Do any of you know the best way to embed it as a background without using plugins or html5 to avoid problems with IE.

thank you!

possible but it doesn´t have to do anything with my question — , Nov 13 '12 at 15:05
http://stackoverflow.com/questions/5867985/iframe-auto-100-height/27853830#27853830 — Josh Crozier, Mar 30 '15 at 23:57

score 2 · Accepted Answer · answered Nov 13 '12 at 15:05

2

Here you go: Demo

Wrap it in a div and set that also to 100%, 100%

iframe, div {
     width: 100%;
     height: 100%;
}

answered Nov 13 '12 at 15:05

Naftali

144,921
39
244
303

@fxg no problem ^_^ happy to help! – Naftali Nov 13 '12 at 15:07

score 0 · Answer 2 · answered Nov 13 '12 at 15:06

0

HTML:

<iframe src="vimeo.path"></iframe>
<div id="container"></div>

CSS:

body {
    overflow: hidden;
}
iframe {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
#container {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
}

DEMO:

http://jsbin.com/utezov/4/embed?live

answered Nov 13 '12 at 15:06

Andreas Louv

46,145
13
104
123

@Neal It does but the iframe in the background doesn't ;) – Andreas Louv Nov 13 '12 at 15:09
I get a "This page aint here" message. – Naftali Nov 13 '12 at 15:09
You demo now has a DIV **covering** the iframe... you cant stop the video or anything else on the video for that matter.... – Naftali Nov 13 '12 at 15:16
@Neal Af the question states `has a video as a background` imo that means that there is an overlaying div/content-holder over the iframe. – Andreas Louv Nov 13 '12 at 15:29

score 0 · Answer 3 · answered Nov 13 '12 at 15:06

<iframe src="http://player.vimeo.com/video/47922974" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/47922974">Jape 'Scorpio'</a> from <a href="http://vimeo.com/fergalbrennan">Fergal Brennan</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

Now i just took a video from vimeo. maybe set a class to the iframe like

<iframe class="fullvideo">

and set the css like:

iframe.fullvideo {
width: 100%;
height: 100%;
}

score 0 · Answer 4 · answered Nov 13 '12 at 15:25

Try to use an ID to identify this bg iframe:

<iframe id="bgiframe">...</iframe>

and redefine this iframe in this way:

html, body, p, div, span, table, td 
/* Add other elements... These are explicit defined since ie6/7 doesn't support * selector */ 
{
   z-index: inherit;
   background: transparent; /* this is important to see-through normal elements */
}

#bgiframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding 0;
    margin: 0;
    border: 0;
    width: 100%; height: 100%;
    z-index: -1;
}

z-index: -1; is for take this element under every other elements. background: transparent; for every other elements is to see through and see video as background.

This can be an example: http://jsfiddle.net/4KHET/2/

Vimeo iframe as background

4 Answers4

Linked