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

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

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

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

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>

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

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.

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