私は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"><br /></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>
方が良いでしょうか? – moe
私は#1を使用しました。 #2は何らかの理由で動作しませんでした。 – user847495