web-dev-qa-db-ja.com

youtube iframeに不透明なdivをオーバーレイ

YouTubeのiframe埋め込み動画の上に半透明の不透明度を持つdivをオーバーレイするにはどうすればよいですか？

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

編集（説明を追加）： HTML5が近づいています。フラッシュの代わりにそれを使用するデバイスが増えており、YouTubeビデオの埋め込みが複雑になっています。ありがたいことに、YouTubeはビデオ埋め込みの互換性の問題がありますが、ビデオオブジェクトを半透明のdivでオーバーレイする以前は機能していた方法が無効になりました。オブジェクトに<param name="wmode" value="transparent">を追加できなくなりました。では、iframe埋め込みビデオの上に不透明なdivを追加するにはどうすればよいですか？

htmlcssiframeyoutubeoverlay
109
Timo Huovinen

この問題に関するアドビの公式サイトからの情報

問題は、YouTubeリンクを埋め込む場合です。

https://www.youtube.com/embed/kRvL6K8SEgY

iFrameでは、デフォルトのwmodeがウィンドウ化され、基本的に他のすべてよりも大きいz-indexが与えられ、すべての上にオーバーレイされます。

このGETパラメーターをURLに追加してみてください。

wmode = opaque

そのようです：

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

URLの最初のパラメーターを確認してください。他のパラメーターは後にする必要があります

Iframeタグ内：

例：

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
211
anataliocs

Wmode = transparent修正は、最初の場合にのみ機能することに注意してください。

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

ない

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
15
Mike

うーん...今回は何が違うの？ http://jsfiddle.net/fdsaP/2/

Chromeで正常にレンダリングされます。クロスブラウザが必要ですか？それは本当に具体的になるのに役立ちます。

EDIT：Youtubeは、明示的なwmodeを設定せずにobjectおよびembedをレンダリングします。つまり、デフォルトでは「window」になります。オーバーレイeverythingを意味します。次のいずれかが必要です。


a）オブジェクト/埋め込みコードを含むページを自分でホストし、両方の要素を提供することを選択した場合、wmode = "transparent" param要素をオブジェクトと属性に追加して埋め込みます

b）youtubeがそれらを指定する方法を見つけます。


10
meder omuraliev

私はanataliocsのヒントを見つける前にCSSをいじって1日過ごしました。 wmode=transparentをパラメーターとしてYouTube URLに追加します。

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

これにより、iframeがコンテナのz-indexを継承できるため、不透明な<div>がiframeの前になります。

2
user605723

審美的な目的のために不透明なオーバーレイはありますか？

その場合、次を使用できます。

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events：none'はオーバーレイの動作を変更するため、物理的に不透明になります。もちろん、これは適切なブラウザーでのみ機能します。

0
Chris