CODEWITHSUNDEEP
htmlz-indexflashwmode
Gusepo
Gusepo

Reputation: 889

Youtube video goes to top from an Iframe

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

Upvotes: 4

Views: 3165

Answers (5)

Orges Cico
Orges Cico

Reputation: 1

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

Upvotes: 0

Chris Spaulding
Chris Spaulding

Reputation: 11

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>

Upvotes: 1

Nathan Loyer
Nathan Loyer

Reputation: 1349

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.

Upvotes: 0

zacharydanger
zacharydanger

Reputation: 514

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.

Upvotes: 4

EkoAdiPG
EkoAdiPG

Reputation: 11

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>');
}

Upvotes: 0

Related Questions