All geek questions in one place

Bootstrap Modal vs Youtube Video z-index Issue

I use Twitter Bootstrap Modal and Youtube Video on the same page. I ran into a Z-Index problem where a video is displayed above a modal window in a Chrome browser.

How can I solve this problem?

http://mink7.com/projects/cmrc/home.html

enter image description here

+4
source share
5 answers

The YouTube video you put on your page is flash based. Flash objects are displayed separately at the top of the window because they are not part of the HTML5 stack. Z-index does not affect them.

See http://www.google.com/search?q=flash+z-index

+5
source

Should you use YouTube URLs with the parameter? wmode = transparent.

<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>

If you include your object / embed tag, you must add <param name="wmode" value="opaque" /> for object tags, wmode=transparent to embed the tags.

+12
source

As suggested by Fatih, the solution should go through wmode=transparent . For the IFrame API, I used the following:

 var player = new YT.Player(pContainer, { height: 300, width: 400, videoId: contentID, playerVars : {wmode: "transparent"}, events: { ... } } });
+1
source

You can easily fix it.

Using:

  <param name="wmode" value="opaque" />

inside an object tag.

 <object title="YouTube video player" width="480" height="390" data="http://www.youtube.com/embed/EBSnWlpTPSk" frameborder="0" wmode="Opaque"> <param name="wmode" value="opaque" /> </object>
0
source

The OBJECT method is now deprecated:

https://developers.google.com/youtube/player_parameters

0
source

Source: https://habr.com/ru/post/1412475/

More articles:


All Articles