Vimeo videos in fullscreen display behind site menu.

I need some link with the problem you are describing to firebug into else I don’t know how to help you.

Are you using a Iframe embed code when it is working?

Thank you for getting back to me! My site is on a company Intranet with no outside access permitted, so unfortunately I cannot provide a link. But here is a better description of the problem:

1) I used your plugin to embed a Vimeo video player on my page.
2) Because it is their player and not just one Vimeo video, I used the iFrame feature within your plugin.
3) I could have just used their Viemo player as-is, but I wanted it to be responsive.
4) Once the Vimeo player is embedded in my page via your plugin (when I click the fullscreen button on one of the videos, and it opens in fullscreen mode), the fullscreen video plays behind the site’s navigation panel.
5) I tried embedding the same video player in a standard iFrame (having deactivated your plugin), and the same video plays in fullscreen, but the site’s nav panel does not remain atop or above the video’s fullscreen ‘layer.’
6) I therefore concluded that it is your plugin which is causing the video to play behind the site’s nav panel when the video is toggled into fullscreen mode.

Is there any other information which I could provide to help you help me? Thank you.

Okay, after doing some experiments, I have determined that the iFrame created by your plugin needs to have two different CSS z-indexes, (1) when the embedded iFrame is on the page and which will not display its contents on top of adjacent page elements, such as sub-menus, etc., and (2) a z-index for when the contents of your plugin’s iFrame becomes fullscreen, the contents of which needs to supersede all other z-indexes regarding all other page elements. Your thoughts?

Alright, here’s the problem described as simply as I know how: The embedded iFrame created by your plugin has the same z-index as the main menu on the left side of my site. If I increase the z-index of the embedded iFrame generated by your plugin (via the advanced-responsive-video-embedder.php file) so that it is greater than the z-index of the site’s menu, the video held by your iFrame is not obstructed by the site’s menu when the video is toggled into fullscreen mode. However, the submenus generated by the site’s menu, which share the same z-index of the menu itself, appear behind your embedded iFrame on the page. Whereas, if I increase the z-index of the main menu so that it is greater than the z-index of the iFrame embedded by your plugin, then the submenus from the main menu no longer display behind the iFrame; but, they then remain visible—on top of—the video held by your plugin’s iFrame, when toggled into fullscreen mode. I know that a similar problem often happens when Flash-based content is embedded on a webpage that uses a CSS-based menu/submenu, and the solution is to add ?wmode=opaque to the URL, which changes the window mode of the embedded content to opaque, thereby making it layered together with other HTML elements on the page, and thus does not obstruct the menu/submenu. Your thoughts? Thank you very much!

Honestly I not really get why you need opaque. To my knowledge transparent and opaque should support layers/z-index. Is your menu that causing problems a normal html/css menu?

I short: If the Iframe pasted manually or created my my plugin makes no diffrence. Vimeo decides the wmode and thats opaque for my comp.

Also not all providers that serve videos in iframes support changing the wmode, you just have to deal what they serve you in iframe. For now you can change mode to opaque for youtube, viddler and maybe others but not vimeo, but this should not concern you since like I said they server opaque on site as well as in iframes!

Search the plugins php file for “wmode=transparent” and you will find lines that you can change to opaque, but you will have to do this again when I update the plugin.

I am thinking about setting all to opaque because when I get this right transparency makes no sense for videos since the are all the time square and never transparent. right?

What do you mean with “fullscreen”? A real fullscreen should no have anything no front of it no matter what z-index or wmode. I guess you mean the colorbox overlay with fullscreen. Then check the divs created by colorbox with firebug or chrome devtools to look if they have z-indexes that not work with your menu.

I get a bit annoyed by people asking for help and then disappear.

Hi.

I believe that I have the same or similar problem on my web site that your plug-in runs.

If you may check the below link in Firefox, Chrome or Safari you may see the problem when you set full screen in Vimeo embedded videos. This doesn’t happen in Explorer.

https://oytunorgul.com/en/land/documentaries/

I’ll be happy if you may help me about this issue. Is this something about your plug-in or a problem about the theme I use?

Finally, I promise and I won’t disappear ??

Thanks…