Youtube iframe wmode Problem

134

Unter Verwendung von Javascript mit jQuery füge ich einen Iframe mit einer Youtube-URL hinzu, um ein Video auf einer Website anzuzeigen. Der Einbettungscode, der von Youtube in den Iframe geladen wird, hat jedoch nicht wmode = "Opaque", daher werden die Modalfelder auf der Seite angezeigt unter dem youtube video.

Irgendwelche Ideen, wie man das Problem löst?

snakeyyy
quelle
Ist das noch ein Problem? Ich habe diese Lösung bereits verwendet, kann jedoch das ursprüngliche Problem im neuesten Chrome / Firefox / IE nicht reproduzieren.
Marcovtwout

Antworten:

238

Versuchen Sie ?wmode=opaque, der URL etwas hinzuzufügen , oder &wmode=opaquewenn bereits ein Parameter vorhanden ist.

Wenn es nicht funktioniert, versuchen Sie es stattdessen, &wmode=transparentwas auch im IE-Browser funktioniert.

Shabith
quelle
1
nett! funktioniert auf Firefox & Chrome, funktioniert aber aus irgendeinem Grund nicht auf IE ... irgendwelche Ideen?
Danfromisrael
31
Versuchen Sie stattdessen, & amp; wmode = transparent zu verwenden
Shabith
29
Die Einstellung "& amp; wmode = xxxx" setzt voraus, dass Sie bereits Parameter in der URL übergeben. Ich war nicht in meinem Fall, also muss ich stattdessen "? Wmode = xxxx" zur URL hinzufügen.
Matt Huggins
6
Unterschiede zwischen opaqueundtransparent . opaquesoll performanter sein.
Donut
3
Shabith - "wmode = Opaque" sollte "wmode = Opaque" sein (Kleinbuchstaben 'o')
John
81

Versuchen Sie ?wmode=transparent, am Ende der URL hinzuzufügen . Hat für mich gearbeitet.

Kasper
quelle
"Transparent" sollte meiner Meinung nach die bevorzugte Option sein.
Foxinni
18

Wenn Sie die neue asynchrone API verwenden, müssen Sie den Parameter wie folgt hinzufügen:

<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE HERE
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}

Dies basiert auf der Google-Dokumentation und dem Beispiel hier: http://code.google.com/apis/youtube/iframe_api_reference.html

Plastikstör
quelle
7
Beachten Sie, dass dies AUCH wmode in playerVars benötigt. Wenn es sich gerade unter YT.Player befindet, funktioniert es nur für den HTML5-Player. Durch Hinzufügen von wmode zu playerVars wird dieser Parameter auch an das Flash-Objekt gesendet, das ein eigenes Problem mit der Z-Reihenfolge hat. Siehe hier: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Ich werde Ihre Antwort entsprechend bearbeiten.
Dylan McCall
1
Ich habe es versucht und es hat nicht funktioniert. Ich habe auch keinen Verweis auf wmode in der YouTude-Dokumentation gefunden.
Sboisse
Der Link hat sich seit dem ersten Posten geändert, ebenso wie die Methode zum Festlegen des WM-Modus. Sie können jetzt einen beliebigen Flash-Parameter oder einen YouTube-Player-Parameter über playerVars einstellen. Ich habe das obige Beispiel aktualisiert.
Plastikstör
Das Laden einer gesamten API, nur um einen Wert zu ändern, der leicht in der URL geändert werden kann, ist ein totaler Overkill. Benutze das nicht.
fregante
Einige von uns arbeiten mit dem chromlosen Player und verwenden bereits die JS-API zur Steuerung der Benutzeroberfläche. Für uns rockt diese Lösung total! Vielen Dank
Maxijb
8

Das Hinzufügen ?wmode=opaquezur URL scheint dieses Problem für mich zu lösen, obwohl ich es noch nicht im IE getestet habe.

Beachten Sie für diejenigen unter Ihnen, die Probleme mit der zuvor vorgeschlagenen Lösung haben, dass ein anfängliches kaufmännisches Und nur funktioniert, wenn Sie der URL bereits andere Argumente liefern. Das erste Argument muss ein erstes Fragezeichen haben:http://www.example.com?first=foo&second=bar

Markus Amalthea Magnuson
quelle
Ich bekam anfangs ein schwarzes Rechteck, unabhängig von dem Video, das ich zeigen wollte. Es stellte sich heraus, dass auf dem Testgerät kein Flash installiert war und der Dialog zum Installieren von Flash zu stark versetzt war!
Zeb
3

Fügen Sie &amp;wmode=transparentder URL hinzu und Sie sind fertig, getestet.

Ich verwende diese Technik in meinem eigenen WordPress-Plugin YouTube Shortcode

Überprüfen Sie den Quellcode, wenn Sie auf ein Problem stoßen.

Túbal Martín
quelle
Hinzufügen von & amp; wmode = transparent nach der URL der You Tube Das Problem wurde in allen Browsern behoben. Vielen Dank für Herrn Tubal, gute Arbeit :)
1

Nur ein Tipp! - Stellen Sie sicher, dass Sie den Z-Index für das Element, das über dem eingebetteten Video angezeigt werden soll, erhöhen. Ich habe den wmode-Querystring hinzugefügt, und er hat immer noch nicht funktioniert ... bis ich den Z-Index des anderen Elements erhöht habe. :) :)

Tyson Phalp
quelle
0

&wmode=opaquehat bei mir nicht funktioniert (Chrome 10), aber &amp;wmode=transparentdas Problem wurde sofort behoben.

imjared
quelle
0

Ich weiß, dass dies eine alte Frage ist, aber sie taucht immer noch in den Top-Suchanfragen nach diesem Problem auf. Daher füge ich eine neue Antwort hinzu, um denjenigen zu helfen, die nach einer für IE suchen:

Das Hinzufügen &wmode=opaqueam Ende der URL funktioniert in IE 10 NICHT ...

Das Hinzufügen ?wmode=opaquemacht jedoch den Trick!


Diese Lösung finden Sie hier: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Amber June
quelle
&und ?sind beide korrekt, je nachdem, in welcher Reihenfolge sie verwendet werden und welche anderen Einstellungen in der URL enthalten sind. ?Wird offensichtlich verwendet, wenn dies die erste (oder einzige) Einstellung ist, &andernfalls.
Alex
Ja, aber IE hat spezielle Bedürfnisse. Probieren Sie es einfach aus und sehen Sie, welche in IE 10 funktioniert und welche nicht. Ich habe dies noch nicht in IE 11 versucht.
Amber
0

&wmode=opaqueVor kurzem habe ich gesehen, dass der Flash-Player manchmal nicht erkennt , dass Sie auch passen sollten &WMode=opaque(beachten Sie den Großbuchstaben).

Nereo Costacurta
quelle