6

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?

user430926
  • 4,017
  • 13
  • 53
  • 77
  • You really should move away from inline styles in this case. It makes things much cleaner when you put a single CSS class for all those `
    `s. Also, which version of Safari are you testing this in? It seems to work perfectly (`
    ` on top, and all) for me in Safari 6.0.
     – Jules Feb 22 '13 at 14:39
  • I'm getting some very peculiar results in Safari 5 (Win XP). I get theproblem you are talking about but I also get a QuickTime block with nothing loading. Also the whole jsFiddle page seems to freak out positioning stuff weirdly. I can't help but just thought you'd be interested in theresults ina different version. Good luck matey :) – Rob Quincey Feb 22 '13 at 15:19
  • I used safari 5.1.7 in win 7. My point is to make draggable div element on top of all embedded object. Thanks. – user430926 Feb 23 '13 at 09:58
  • I have update the code and put a single CSS. I tried those code is works fine in Chrome & Firefox but not in Safari (OS Wind 7). Any suggestion what is the problem? – user430926 Feb 25 '13 at 06:17
  • See here http://stackoverflow.com/questions/5867147/are-object-embed-tags-always-on-top – Bart Mar 12 '13 at 20:07

4 Answers4

5

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

lukeocom
  • 3,243
  • 3
  • 18
  • 30
  • it's works but only for the second emebedded, how about the first one? Thanks. – user430926 Feb 25 '13 at 10:10
  • where ever you have the wmode set to transparent, set it to opaque.. I have updated the fiddle. – lukeocom Feb 26 '13 at 04:43
  • I tried the fidlle but it's not working, you could see my screenshot when running it. The div element still behind the first embedded object. – user430926 Feb 26 '13 at 07:16
  • really weird behavior! setting the mime type for the first object seems to work. type="application/x-shockwave-flash" however you may need to use a different type as I dont have an .avi file to test with here. – lukeocom Feb 27 '13 at 01:25
  • For the first object I need to used plugin/ActiveX so I can't used type="application/x-shockwave-flash". Actually xxxx.avi just a fake filename, so it really weird. Any other suggestion? – user430926 Feb 27 '13 at 02:38
  • try type="application/x-oleobject" and see if that makes a difference. Otherwise im not too sure as I dont have experience with embedding activex objects. – lukeocom Feb 27 '13 at 03:20
  • I tried type="application/x-oleobject" but it said missing plugin where can I download it? – user430926 Feb 27 '13 at 03:44
  • Hi luke, if I used type="application/x-oleobject" because no plugin so the div is on the top, but I think if you have plugin it will still behind the embedded object. Thanks. – user430926 Mar 01 '13 at 11:54
  • You could try adding which is suggested in this thread: http://stackoverflow.com/questions/1602366/windows-media-player-on-top-other-div – lukeocom Mar 13 '13 at 04:41
1

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');
Goran
  • 677
  • 3
  • 22
1

Here are the specs of the z-index property (src: w3.org):

Each box belongs to one stacking context. Each positioned box in a given stacking context has an integer stack level, which is its position on the z-axis relative other stack levels within the same stacking context.

I think that <div class="drag"> is not in the same stacking context as your flash objects.To make sure that the stacking context is correct, make the <div id="draggable"> also relative, and give it a higher z-index than the <div> that contains the flash objects.

Note: I'm not able to test Safari at the moment, so let me know if it works or not:

<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>
Justus Romijn
  • 15,699
  • 5
  • 51
  • 63
0

works IE FF Chr & Saf

Placing a div over an iframe/video...

to place div over an image just replace the iframe w/ your image ....

trick part is for video ... you must add ... ?wmode=transparent ... to the end of the 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>

or if you want to use your Object code....

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

and the avi code....

<!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>
Brad Byrne
  • 1
  • 2