element is not top layer in Safari Windows

Question

I have <div> element to show pop-up message. I already set z-index:1000 and add <iframe> but the div element still doesn't show above the live streaming video (embed plugin) in Safari browser. I used Chrome and Firefox, both of which work, but it doess't work in Safari Windows.

This is my code in a Fiddle.

<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>

Can anyone find any issues with this code?

lukeocom · Accepted Answer

You need to change/set your wmode to opaque.

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

And try setting the appropriate type for the first object.

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

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

Goran · Answer

As far as I can remember flash is on top of all HTML elements.

You can try to hide it when the pop up is there. Unfortunately I haven't seen a work around for that yet.

One good method is to have a place holder image that is the same size as the video and toggle them

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

when you have the pop up opened

$(".video").css('display','none');
$(".placeholder").css('display','block');

<div> element is not top layer in Safari Windows

Tags:

html

safari

z-index

always-on-top

html-object

user430926

2 Answers

lukeocom

Goran

Recent Activity

Donate For Us