0

When i embeded Youtube video via iframe, it ignores z-index and hangs over the fixed menu element having z-index value 9999.

In Older questions, i found the answer here, adding the parameter '&wmode=Opaque' or '&wmode=transparent' to the url of youtube video, but doesn't work. These solutions looks old like in 2008 or 2012.

So i want to know how to resolve it. Please someone help!

Kota
  • 1
  • There has not been a change as far as I know, show us what your iframe code looks like otherwise we can not help you. My inital thought is that you put "&" when wmode is your first parameter, in which case you need to use "?" – Rence Jun 15 '18 at 14:40
  • Thank you for your response. i use this iframe codes like this. i removed other parameters so i use "?" as you imagined. And i set "z-index: 1" to iframe tag in my css file. Is there anything else that i can do? – Kota Jun 17 '18 at 13:45

1 Answers1

0

There are quite some things wrong with the iframe code you posted, some are minor but should still be corrected to ensure your code will work everywhere without issue.

First, do not use a semicolon after your source.
Second, you should not remove the https:// from the source url.
Third, and this is the reason it is not working for you, you did not copy the wmode="Opaque" from the answer you linked.

So your iframe code should be:

<iframe width="560" height="315" src="https://youtube.com/embed/p0O1VVqRSK0?wmode=transparent" wmode="Opaque" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

See this fiddle for demonstation: https://jsfiddle.net/7ox49Ldv/3/

If it is still not working for you with the corrected iframe code, there must be a deeper issue with your html/css.

Rence
  • 2,900
  • 2
  • 23
  • 40