6

<div>ポップアップメッセージを表示する要素があります。すでに設定z-index:1000して追加<iframe>しましたが、Safariブラウザのライブストリーミングビデオ（埋め込みプラグイン）の上にdiv要素が表示されません。ChromeとFirefoxを使用しましたが、どちらも機能しますが、SafariWindowsでは機能しません。

これはフィドルの私のコードです。

<BODY style="background:transparent">
<div style="position:relative; z-index:0;">
    <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180">
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>

    <object>
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="240" height="180"></embed>
    </object>
</div>  

<div id="draggable">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>


誰かがこのコードに関する問題を見つけることができますか？

4

4 に答える 4

5

wmodeを不透明に変更/設定する必要があります。

<embed src="..." wmode="opaque"></embed>

そして、最初のオブジェクトに適切なタイプを設定してみてください。

<embed src="xxxx.avi" ...wmode="opaque" type="application/x-shockwave-flash"></embed>

http://jsfiddle.net/8C2py/7

于 2013-02-25T06:41:21.087 に答える
1

z-indexプロパティの仕様は次のとおりです（src： w3.org）：

各ボックスは、1つのスタッキングコンテキストに属しています。特定のスタッキングコンテキストに配置された各ボックスには整数のスタックレベルがあります。これは、同じスタッキングコンテキスト内の他のスタックレベルに対するz軸上の位置です。

これはフラッシュオブジェクトと同じスタッキングコンテキストではないと思い<div class="drag">ます。スタッキングコンテキストが正しいことを確認するには、相対的なものも作成し、フラッシュオブジェクトを含む<div id="draggable">ものよりも高いz-indexを指定します。<div>

注：現在Safariをテストすることはできませんので、動作するかどうかをお知らせください。

<div style="position:relative; z-index:1;">
    ... your flash objects...
</div>  

<div id="draggable" style="position: relative; z-index: 2;">
    <div class="drag">
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
        <p>Drag me around!! Drag me around!!</p>
    </div>
    <iframe class="frame"></iframe>
</div>
于 2013-03-12T08:11:15.533 に答える
1

私が覚えている限り、Flash はすべての HTML 要素の上にあります。

ポップアップが表示されているときに非表示にすることができます。残念ながら、私はまだその回避策を見ていません。

良い方法の 1 つは、ビデオと同じサイズのプレースホルダー画像を用意して、それらを切り替えることです。

<div class="video">
    <!-- video here -->
</div>
<div class="placeholder" style="display:none;">
    <img src="path/to/placeholder.jpg"
</div>

ポップアップを開いたとき

$(".video").css('display','none');
$(".placeholder").css('display','block');
于 2013-03-10T20:10:54.763 に答える
0

Works IE FF Chr & Saf

iframe/ビデオの上に div を配置しています...

画像の上に div を配置するには、iframe を画像に置き換えます ....

トリック部分はビデオ用です... 追加する必要があります... ?wmode=transparent ... src URLの最後に...

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:220px; height:140px;">
    <iframe id="frm0" class="Vid" src='http://www.youtube.com/embed/y1VVXrUdO2s?wmode=transparent' frameborder='0'></iframe>
    <div id="div0" draggable="true" class="Lyr" ></div>
</div>

または、オブジェクトコードを使用したい場合....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" >
        <param name="wmode" value="transparent"></param>
        <param name="movie" value="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US"></param>
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <embed src="http://www.youtube.com/v/Q5im0Ssyyus?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" 
        allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="240" height="180"></embed>
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>

そしてaviコード....

<!DOCTYPE HTML > 
<style type="text/css"> 
.Container {position:relative;  float:left;  border: 1px solid #0f0; }
.Vid {position:absolute; top:7px; left:7px; width:90%; height:90%;  }
.Lyr { float:left; width:90%; height:90%; background-color: #a3a3e6;  opacity:0.5; border: 1px solid #f00; }
</style>

<div id="Cntr0" class="Container" style="width:260px; height:190px;">
     <object class="Vid" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="240" height="180" >
        <param name="wmode" value="transparent"></param>
        <embed height="180" width="240" align="left" src="xxxx.avi" allowscriptaccess="always" autoplay="false" controller="true" wmode="transparent"></embed> 
    </object>
     <div id="div0" draggable="true" class="Lyr" ></div>
</div>
于 2013-03-12T18:08:06.303 に答える