2011-08-16 14 views
4

私はこのHTMLを持っている:youtube iframeの上記の画像は可能ですか?

<div class="frame" id="play"> 
    <img src="images/click.png" alt="facebook"> 
</div> 
<div class="frame" id="maru"> 
    <iframe width="418" height="278" 
     src="http://www.youtube.com/embed/hPzNl6NKAG0" 
     frameborder="0" allowfullscreen> 
    </iframe> 
</div> 

と、このCSS:

.frame { 
    width: 420px; 
    height: 280px; 
    position: absolute; 
} 

#play {z-index: 100} 
#maru {z-index: 1} 

なぜユーチューブの動画の下にapperingイメージはありますか?

答えて

1

あなたはイメージアンカーを正しく閉じていませんが、私はそれを考えていません。

これは動画の下に表示されます。これは別のdivに配置されているためで、両方とも同じクラスを持ち、両方のdivが独自のサイズを持つことを意味します。

HTML

<div id="vidFrame" class="play"> 
<iframe width="418" height="278" 
src="http://www.youtube.com/embed/hPzNl6NKAG0" 
frameborder="0" allowfullscreen> 
<img src="images/click.png" alt="facebook" /> 
     </iframe> 
     </div> 

CSSそれが動作するかどう

 #frame { 
     width: 420px; 
     height: 280px; 
     position: absolute; 
     } 

.play {z-index: 100} 
.maru {z-index: 1} 

わからないが、私はしようと何のthats:これを試してみてください。

5

シンプル...入れIFRAMEのSRCでのIDの映像の後のwmode =不透明.... ...

例:?

<iframe width="418" height="278" 
src="http://www.youtube.com/embed/hPzNl6NKAG0?wmode=opaque" 
frameborder="0" allowfullscreen> 
関連する問題