it-swarm.com.de

z-index und iFrames!

Ich verwende das FancyBox plugin für einige Bilder meiner Site. Auf einer meiner Seiten habe ich auch den eingebetteten iFrame-Code von YouTube, um ein Video auf der Seite zu platzieren. 

Auf dieser Seite befindet sich eine Miniaturansicht, in der FancyBoxes das Bild anzeigt, wenn Sie darauf klicken. Das eingebettete YouTube-Video liegt jedoch immer noch über dem Bild der FancyBox. Ich habe ein wenig mit dem Z-Index experimentiert und immer noch kein Glück.

Verfügt ein iFrame über einen Rang für alle Elemente einer Seite, selbst wenn der Z-Index usw. eingestellt ist?

33
cqde

Fügen Sie wmode = transparent als Parameter hinzu.

HTML-Lösung

<iframe title="YouTube video player" 
width="480" height="390" 
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" 
frameborder="0"
>

jQuery-Lösung: 

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Quelle http://www.scorchsoft.com/news/youtube-z-index-embed-iframe-fix

37
Simonini

In einem Wort, ja. Youtube-Videos sind jedoch Flash. Flash hat auch ein Dienstalter in der Z-Reihenfolge. Es wird eingeblendet, ob es sich in einem IFRAME befindet oder nicht. 

IFRAME und Flash sind Objekte mit hohem Gewicht. Sie verfügen über eigene Window-Manager-Objekte (in Windows HWND), sodass sie sich entweder vor anderen schwergewichtigen Objekten oder hinter ihnen befinden.

div, span usw. sind "leicht". Das heißt, es handelt sich um gezeichnete Objekte, die auf den Hauptteil (ein schwergewichtiges Objekt) gezeichnet und vom Browser und nicht vom Fenstermanager verwaltet werden. 

Für den Window-Manager des Betriebssystems handelt es sich lediglich um schöne Bilder, die vom Browser gezeichnet werden. Deshalb können sie keine "echten" Objekte überlagern (oder was der Fenstermanager als "real" ansieht).

Sie müssen leichtgewichtig sein, da sie den Window-Manager schnell erschöpfen würden, wenn jeder DIV und SPAN und A OS-Ressourcen reservieren müsste.

13
Ben

Es ist sehr einfach, fügen Sie einfach diese Parameter zu Ihrer iframe-URL hinzu und das ist es:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque">

Viel Glück!

4
DomingoSL

Wenn Sie möchten, dass das Flash-Applet gemäß den gleichen Z-Index-Regeln eines anderen HTML-Elements gerendert wird, müssen Sie das WMODE-Attribut für das enthaltene Flash festlegen. 

Sehen:

  1. http://www.communitymx.com/content/article.cfm?cid=E5141
  2. Unterschiede zwischen wmode = "transparent", "undurchsichtig" oder "Fenster" für ein eingebettetes Objekt auf einer Webseite
4
DuckMaestro

Damit dies in IE (mindestens 7 und 8) funktioniert, müssen Sie Folgendes hinzufügen:

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

Ich glaube nicht, dass es eine Möglichkeit gibt, dies an die Iframe-URL anzuhängen, daher muss Ihr Inhalt dies haben, wahrscheinlich zwischen Objekt-Tags.

0
Calydon

Hmm, das Problem hier ist, dass ich keine Kontrolle über die Blitzelemente habe. Ich ziehe im Grunde nur den eingebetteten iFrame-HTML-Code von der Youtube-Site ab, die nur die Tags enthält. Also kann ich das WMODE-Attribut nicht setzen.

Späte Antwort aber: ja kannst du. Befestigen Sie einfach wmode = undurchsichtig an der URL von yt.

<iframe src="http://www.youtube.com/embed/vRH3Kq5qDw4?wmode=opaque".............
0
matt