[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now


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

Posted on 2011-10-04
Medium Priority
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="http://www.youtube-nocookie.com/v/fgg2tpUVbXQ?version=3&amp;hl=en_US&amp;rel=0"></param>
                <param name="allowFullScreen" value="true"></param>
                <param name="allowscriptaccess" value="always"></param>
                <embed src="http://www.youtube-nocookie.com/v/fgg2tpUVbXQ?version=3&amp;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

Mark Steggles earned 2000 total points
ID: 36939512
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

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!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

867 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