Mehrstufige Dropdown-Navigationsmenüs mit darunter über IFrames eingebetteten YouTube-Videos haben in bestimmten Web-Sites zu Rendering-Problemen geführt Browser. Während das Dropdown-Menü in Firefox über dem Video erscheint, bleibt in Chrome und IE9 nur ein Bruchteil davon sichtbar.
Der Schuldige ist überraschenderweise nicht der Iframe, sondern das YouTube-Video selbst. Wenn Sie den Iframe auf andere externe Websites ausrichten, wird das Dropdown-Menü auch im IE ordnungsgemäß angezeigt. Dies deutet auf ein mögliches Problem mit dem Einbettungscode von YouTube hin.
Experten empfehlen die Einbindung des wmode-Parameters, der zwei Werte hat:
Obwohl es nur begrenzte Dokumentationen gibt, die seine Wirkung erklären, kann das Problem durch Anhängen dieses Parameters an die URL des Videos, wie im folgenden Beispiel gezeigt, behoben werden:
<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">
Alternativ kann auch ein jQuery-Skript verwendet werden Ändern Sie alle IFrames auf einer Seite:
//Fix z-index youtube video embedding $(document).ready(function (){ $('iframe').each(function(){ var url = $(this).attr("src"); $(this).attr("src",url+"?wmode=transparent"); }); });
Dieser Ansatz hebt erfolgreich die Z-Index-Dominanz von YouTube-Videos auf, sodass Dropdown-Menüs und andere Elemente korrekt darüber angezeigt werden können.
Das obige ist der detaillierte Inhalt vonWarum werden YouTube-Iframes in Dropdown-Menüs in verschiedenen Browsern unterschiedlich dargestellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!