Problem with elements that have position: fixed or absolute

Can you please explain "the overlay problem"?

(You can see http://drupal.org/node/73179 on how to create issues that help maintainers understand your issues)

Having the same issue, but adding ?wmode=opaque didn't solve it for me.

PS: problem doesn't appear on Firefox.

Thank you @grady and klickreflex, I believe a fix for this is forthcoming.

I have a similar issue with a dropdown menu that goes behind the YouTube video player. This occurs in Chrome and IE, but not Firefox. This page explains the issue -- http://www.pagelines.com/wiki/Drop_Down_Navigation_Falls_Behind_YouTube_...

On line 57 of youtube.theme.inc, I've added a parameter to the embed URL that forces the YouTube player to be opaque, meaning content won't go behind it. Like so:

height="' . $dimensions['height'] . '" src="' . $src . '&wmode=opaque"

So, my YouTube video player's iframe looks like this when rendered:

<iframe width="600" height="400" src="http://www.youtube.com/embed/UZDOa7_EV6Q?rel=0&wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

This solves the problem for me. I'm unsure whether there could be a scenario where the wmode was the only parameter, meaning the "&" would have to be a "?"...

Clavigne's answer solved it for me
except that i had to replace the & with a ?
like so
youtube.theme.inc
line 55 to 59

  else {
    $output = '<iframe width="' . $dimensions['width'] . '" 
      height="' . $dimensions['height'] . '" src="' . $src . '?wmode=opaque" 
      frameborder="0" allowfullscreen></iframe>';
  }

I've tested the latest Chrome (Windows and Mac) and could no longer replicate this issue. I was able to, however, in IE8 and IE7.

The methods suggested here do work, but 'hardcoding' the parameter like this requires the knowledge of how many other parameters are already involved. Instead it is better to add to the $query array in youtube.theme.inc before it is used to create the $src URL.

The attached patch creates an option in YouTube settings (admin/config/media/youtube) to "Fix overlay problem on IE8 and lower". It is false by default because it is only necessary if you have IE users using Overlay, or have modal windows used throughout your site. Checking it to true will add wmode=opaque to the URL as discussed above. This then solves the issue in IE.

This should be a more permanent and reliable solution.

Disclaimer: this currently doesn't want to work with the 'old embed code' selection checked, but I think there are currently bigger/unrelated issues with that.

I'm also unable to replicate the problem in Fireforx, Chrome, or Safari, but I like the solution offered in #9. I've changed the default value to TRUE, and also added a variable_del on uninstall. This patch has been committed, and I'm marking this issue as Fixed. Please re-open if you are able to reproduce the "Overlay problem".

Just nitpicking on the wording, the wmode solution works fine, but the original problem also occurred on IE9.
Also, I think the wording would be more accurate if it was something like Checking this will fix the issue of a YouTube video showing above elements with fixed or absolute positioning (including Drupal's Overlay and Toolbar). This is needed if you have Overlay users in IE or have modal windows throughout your site.

attached patch only changes IE8 to IE9, lemme know if you want me to roll a patch for the other change in wording.

@seutje

I am not able to reproduce the problem in IE9, but trust you, as we all know IE9 is not free of it's ancestors' unpredictability.

At this point I'm wondering if we might as well say "IE" instead of "IE9 and lower". Then again, IE10 should be release next month. I don't have my hands on a preview download just yet, but I'd be curious to know if the problem persists in IE10. That would help determine what wording is appropriate, eh?

I agree with replacing "above a modal window (including Drupal's overlay)" with "above elements with fixed or absolute positioning (including Drupal's Overlay and Toolbar)".

I'm also debating changing "This is needed if you have Overlay users in IE or have modal windows throughout your site." to "This is also needed if you have modal windows throughout your site." or removing the sentence completely. What do you think?

Could you roll a new patch that includes all of the changes you see fit based on this discussion?

Thanks,
Gus

Yeah, that second sentence does feel a bit repetitive, attached patch changes it to just "IE", uses the "fixed and absolute positioning" wording and drops the second sentence.

Thanks for the speedy response!

Sure, thanks for bringing it up! Your patch has been committed.