2012-01-16 18 views
0

私はYoutubeビデオを背景の壁紙にしたいが、それでもインタラクティブにしたい。すなわち、ユーザは、ビデオをクリックすることによってそのビデオを一時停止することができる。このYouTube動画をクリック可能(css + z-index)にするにはどうすればよいですか?

今、iframeをz-index-99に設定しました。何らかの理由で、私はそれをクリックすることはできません! Firebugでそれを調べた後、本体がiframeをカバーしているようです。 (これをクリックする唯一の方法は、下端までスクロールして本文が終了し、iframeが公開されている場合です)。

このiframeをクリック可能にする方法はありますか?私はiframeを "1"にすることができます。

注:このコードをjsfiddleに貼り付けることはできません。それは理由jsfiddleのフレームで動作しません。)

<style> 
    body{ 
     padding:0px; 
     margin:0px; 
    } 
    iframe{ 
     width:100%; 
     height:100%; 
     position:fixed; 
     top:0px; 
     left:0px; 
     z-index:-99; 
    } 
    .go{ 
     color:#fff; 
     position:relative; 
     margin-top:50px; 

    } 
</style> 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 

<iframe id='youtube_bg' class="youtube-player" type="text/html" src="http://www.youtube.com/embed/lUjWJSnGVB0?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" frameborder="0">&lt;br /&gt;</iframe> 


<div class="go"> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
<h1>hahaihaahahaha</h1> 
</div> 

答えて

0

あなたはIFRAMEを除く身体のすべての子のzインデックスを変更する必要が言ったように。

bodyまたはhtmlのz-indexを-1に変更し、iframeを0に変更し、コンテンツを1またはautoに保持します。 CSSの後の編集のために

html, body { 
z-index : -1; 
} 
#yotube_bg { 
z-index : 0; 
} 

第2の解決策は、あなたがどちらを使うのですか

+0

方が良いでしょうか? – moe

+0

私は#1を使用しました。 #2は何らかの理由で動作しませんでした。 – user847495

関連する問題