Z-Index und iFrames!

Ich bin mit dem FancyBox plugin für meine Website Bilder. Auf einer meiner Seiten, ich habe auch das eingebettete iFrame-code von YouTube um ein video auf der Seite.

Auf derselben Seite ist eine Miniatur, die, wenn geklickt, FancyBoxes das Bild. Allerdings, das eingebettete YouTube-video legt noch über die FancyBox image. Ich habe ein wenig mit z-index experimentiert und noch kein Glück.

Macht ein iFrame haben Dienstalter über alle Elemente in einer Seite auch mit z-index festlegen, etc.?

InformationsquelleAutor der Frage cqde | 2011-03-12

  1. 37

    Hinzufügen wmode=transparent als param.

    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

    InformationsquelleAutor der Antwort Simonini

  2. 13

    In einem Wort, ja. Aber Youtube videos sind Flash. Flash hat auch das Dienstalter über die Z-Reihenfolge. Es wird overlay, ob es in einem IFRAME oder nicht.

    IFRAME und Flash sind "heavyweight" - Objekte. Sie haben Ihre eigenen Window-Manager-Objekte (HWND-Eigenschaft in Windows), so sind Sie entweder vor anderen schwergewichtigen Objekten oder hinter Ihnen.

    div , span usw sind "leicht". Das ist, dass Sie gezeichnet sind Objekte, die gezeichnet wird, auf den Körper (das ist ein heavyweight-Objekt), und vom browser verwaltet, nicht vom window-manager.

    Soweit das Betriebssystem window manager ist besorgt, Sie sind einfach schöne Bilder vom browser gezeichnet. Das ist, warum Sie nicht overlay "echte" Objekte (oder das, was der Fenster-manager denkt wie real).

    Müssen Sie leicht sein, weil Sie würde sich schnell erschöpfen der Fenster-manager, wenn alle DIV und SPAN und A hatte reservieren OS-Ressourcen.

    InformationsquelleAutor der Antwort Ben

  3. 4

    Wenn Sie wollen, dass die Flash-applet gerendert werden nach den gleichen z-index Regeln von jedem anderen HTML-element, dann Sie müssen den WMODE-Attribut für die im Lieferumfang enthaltenen Blitz.

    Finden Sie unter:

    1. http://www.communitymx.com/content/article.cfm?cid=E5141
    2. Unterschiede zwischen der Verwendung von wmode="transparent", "opaque" oder "window" für ein eingebettetes Objekt auf einer Webseite

    InformationsquelleAutor der Antwort DuckMaestro

  4. 4

    Ist sehr einfach, fügen Sie einfach diesen Parameter auf Ihre iframe-url an 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">

    Glück!

    InformationsquelleAutor der Antwort DomingoSL

  5. 0

    Hmm, das problem hier ist, dass ich nicht die Kontrolle über die flash-Elemente. Ich bin im Grunde nur das ziehen der eingebettete iFrame-HTML-Code aus der youtube-Website enthält nur die tags. So kann ich nicht den WMODE-Attribut.

    Späte Antwort, aber: ja, Sie können. Nur wenden ?wmode=opaque auf die yt-url.

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

    InformationsquelleAutor der Antwort matt

  6. 0

    Zu bekommen dies funktioniert auch im IE (zumindest 7 und 8), müssen Sie Folgendes hinzufügen:

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

    Glaube ich nicht, es ist ein Weg, um Anhängen dieser an die iframe-URL, damit Ihr Inhalt muss diese haben, wohl zwischen Objekt-tags.

    InformationsquelleAutor der Antwort Calydon

Schreibe einen Kommentar