jQuery UI dialog with embedded youtube resource - youtube video floats over the top of the dialog

Posted on 2011-10-04
Last Modified: 2012-05-12
I have a page that has an embedded youtube resouce.  This page also has a number of popup dialogs that I'm creating with jQuery UI.  The dialogs are draggable so you can move them around the page.  But when you move them over the youtube video, the dialog actually floats under the youtube video.  This is not the functionality I'm looking for.

I've done some searching around and found a few examples that explain to do this...

I've tried to do this, but it doesn't seem to be working.  Here is my embedded youtube resource.

<div class="public-page-video-container">
            <object width="420" height="315">
                <param name="wmode" value="transparent"></param>
                <param name="movie" value=";hl=en_US&amp;rel=0"></param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed src=";hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

Open in new window

I've also tried to add a z-index of 1000 to the dialogs and z-index of 0 to the div that contains the youtube.  I'm not sure why this isn't working or what else I should try.

Question by:JosephEricDavis
    1 Comment
    LVL 30

    Accepted Solution

    Have you tried adding wmode=transparent to the embed tag?

    Also, did you try adding &wmode=transparent onto the url like the stackoverflow answer suggested?

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    733 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

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now