?
Solved

Why is embedded media always on top?

Posted on 2011-10-06
6
Medium Priority
?
160 Views
Last Modified: 2012-06-27
I've noticed that whenever I embed flash or a video into a page, using <object>/<embed> tags, that the media div always appears on top of everything else, as if it had an infinite z-index.  This is a problem if you want to pop up a window on top of the the media.  Does anyone know why this happens and if there's any way to override it?

Thanks
Steve
0
Comment
Question by:steva
6 Comments
 
LVL 9

Expert Comment

by:BlueYonder
ID: 36924424
I usually put everything in a table to avoid the problem or use css/div tags to set the space.
0
 
LVL 1

Expert Comment

by:underrugswept
ID: 36924555
<DIV ID="flashMovie" STYLE="width: 400; height: 180; z-index: 0;">
flashcode here
</DIV>

You can play with the z-index value. You can change the 0 to -1 and see if that helps.
0
 

Author Comment

by:steva
ID: 36924584
Could you explain how using  a table overcomes the problem?    And I do use div tags.  The code below, for example, embeds a flash panel and nothing I add later or pop up will appear on top of it:

     <div id="butterflyoverlay">
        <object
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            id="Butterfly"
            width="708" height="172">
            <param name="movie" value="_swf/Butterfly_homepage.swf" />
            <param name="bgcolor" value="#FFFFFF" />
            <param name="quality" value="high" />
            <param name="seamlesstabbing" value="false" />
            <param name="allowscriptaccess" value="samedomain" />
            <embed
                  type="application/x-shockwave-flash"
                  pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
                  name="Butterfly"
                  width="708" height="172"
                  src="_swf/Butterfly_homepage.swf"
                  bgcolor="#FFFFFF"
                  quality="high"
                  seamlesstabbing="false"
                  allowscriptaccess="samedomain"> 
              <noembed> </noembed> 
            </embed>

        </object>
      </div>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:BlueYonder
ID: 36924600
Using a table confines objects within the given cell and the table can have its own style
0
 
LVL 43

Accepted Solution

by:
David S. earned 2000 total points
ID: 36927632
The short answer is because embedded media are displayed via plugins and therefore they are handled differently from other elements on each page.

There is a way to override it for Flash objects, but not for other types of plugins. Flash has the "wmode" parameter that can be used to allow other elements to overlap it:
SWF file ignores stacking order, plays on top of DHTML layers
Layer to display over flash
Flash OBJECT and EMBED tag attributes
0
 

Author Comment

by:steva
ID: 36928015
Thanks Kravimir!  You nailed it!  I gave you the points.

I wonder if I could ask you one more thing about this.  I notice that wmode has a transparent option, where the flash background is transparent. Does this mean that mouse clicks are "felt" through it?  That is, if the flash overlays a link, can I still click on and activate the link if wmode = transparent?

Thanks for your great answer.

Steve
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question