javascript - Vimeo iframe 作为背景

Question

我要制作一个以视频为背景的网站。

我想从 vimeo 加载视频，但我还没有找到全屏播放的最佳方式。

我正在尝试向 iframe 添加一个 CSS，但它根本不起作用：

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

你们中的任何人都知道在不使用插件或 html5 的情况下将其作为背景嵌入的最佳方法，以避免 IE 出现问题。

谢谢你！

Answer 1

给你：演示

将其包装在一个 div 中并将其设置为 100%、100%

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

Answer 2

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;
}

演示：

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

Answer 3

<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>

现在我刚从 vimeo 拍了一段视频。也许为 iframe 设置一个类，比如

<iframe class="fullvideo">

并将css设置为：

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

Answer 4

尝试使用一个 ID 来识别这个 bg iframe：

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

并以这种方式重新定义此 iframe：

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;用于将此元素置于其他所有元素之下。 background: transparent;对于其他所有元素，都是通过将视频视为背景。

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