javascript - 背景としての Vimeo iframe

Question

動画を背景にしたウェブサイトを作ります。

vimeo からビデオをロードしたいのですが、フルスクリーンにする最良の方法が見つかりません。

css を iframe に追加しようとしていますが、まったく機能しません。

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

IE の問題を回避するために、プラグインや html5 を使用せずに背景として埋め込む最良の方法を知っている人はいますか?

ありがとう！

Answer 1

どうぞ:デモ

それをdivでラップし、それも100％、100％に設定します

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

Answer 2

IDを使用してこのbgiframeを識別してみてください。

<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;他のすべての要素は、ビデオを背景として透視して見ることです。

これは例です：http： //jsfiddle.net/4KHET/2/

Answer 3

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 4

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