Youtube video goes to top from an Iframe

Question

I've got a page with an iframe displaying external website that covers the whole page, on top there's a div with some content, similar to google images new interface. If in the page contained in the iframe there's a youtube video it goes over the content in the main page, since the page in the iframe is from an external web site a cannot set wmode transparent on it.

Is there a way to control layering of flash inside the iframe?

Thanks

Giuseppe

score 4 · Answer 1 · answered Feb 22 '11 at 19:50

4

You just need to change the iframe's src value like so:

$('iframe').each(function() {
    var fixed_src = $(this).attr('src') + '&amp;wmode=transparent';
    $(this).attr('src', fixed_src);
});

*Note: This is specific to YouTube's iframe embed code.

answered Feb 22 '11 at 19:50

zacharydanger

504
3
18

1

this isn't really going to work if there are no other get parameters in iframe source, so you'd need to first check if $(this).attr('src') contains "?" and if it doesn't, then you should prefix "wmode=transparent" with "?" instead of "&". – Misha Reyzlin Apr 13 '11 at 13:45

score 1 · Answer 2 · answered Apr 22 '12 at 02:46

1

Add a ?, not the &. "?wmode=transparent" For example:

<iframe width="697" height="400" src="http://www.youtube.com/embed/IgvDkflXVuw?wmode=transparent" frameborder="0" allowfullscreen></iframe>

answered Apr 22 '12 at 02:46

Chris Spaulding

11
1

score 0 · Answer 3 · edited Feb 16 '19 at 10:49

0

Just add also id together with the rest of the attributes to your iframe as shown below

<iframe id="ytplayer" width="697" height="400" src="http://www.youtube.com/embed/IgvDkflXVuw?wmode=transparent" allowfullscreen="" type="text/html" wmode="Opaque"  frameborder="0" wmode="Opaque"></iframe>`

edited Feb 16 '19 at 10:49

Zoe

27,060
21
118
148

answered Sep 17 '13 at 16:21

Orges Cico

1

score 0 · Answer 4 · answered Jan 18 '11 at 14:31

Since you have posted the question for quite a while I wonder if you had known the answer.

Anyway, you could try to change the wmode using javascript (using jquery would be much simpler, ;))

try this code:

if ($('embed').length){
    $('embed').attr('wmode', 'transparent').wrap('<div>');
}

or if it doesn't recognize the embedded object inside the iframe, you could try:

if ($('iframe embed', parent.document).length){
    $('iframe embed', parent.document).attr('wmode', 'transparent').wrap('<div>');
}

score 0 · Answer 5 · answered Dec 08 '11 at 19:26

0

Just add &wmode=transparent at the end of the YouTube embedded iframe src attribute. You can change the src later with jQuery, but why let the page load the wrong content, and then change it so it reloads the right content? Just edit the HTML.

answered Dec 08 '11 at 19:26

Nathan Loyer

1,339
10
20

Youtube video goes to top from an Iframe

5 Answers5