Home > Article > Web Front-end > Why does my dropdown menu appear behind a YouTube video in Chrome and IE9?
YouTube Video Embeds and z-index Problems
When embedding a YouTube video using an iframe below a multilevel dropdown navigation menu, you may encounter issues where the dropdown menu appears behind the video in Chrome and Internet Explorer. While hovering over a main navigation item, the dropdown should appear on top of the video in all browsers.
Question 1: Why is the dropdown menu appearing behind the YouTube video in Chrome and IE9?
This problem is related to the YouTube video itself, not the iframe. YouTube embeds include internal CSS that overrides other CSS settings, including your z-index values.
Question 2: Why does setting z-index:-999 !important; on the iframe still cause the problem?
The overriding CSS in the YouTube embed code takes precedence over any z-index settings you apply to the iframe.
Solution:
To fix this issue, add the following parameter to the embedded video's URL:
&wmode=Opaque
This setting allows the video to blend into the background, allowing other elements on the page to appear on top of it.
Additional Notes:
$(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); });
The above is the detailed content of Why does my dropdown menu appear behind a YouTube video in Chrome and IE9?. For more information, please follow other related articles on the PHP Chinese website!