Youtube iframe wmode Ausgabe

Question

Unter Verwendung von Javascript mit jQuery, ich füge ein iframe mit einer youtube URL hinzu, um ein Video auf einer Webseite anzuzeigen, aber der eingebettete Code, der in den iframe von Youtube geladen wird, hat nicht wmode = "Opaque" deshalb Modale Boxen auf der Seite werden unter dem YouTube-Video angezeigt.

Irgendwelche Ideen, wie man das Problem löst?

Answer 1

Versuchen Sie, die URL ?wmode=opaque oder &wmode=opaque hinzuzufügen, wenn bereits ein Parameter vorhanden ist.

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

Answer 2

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

Answer 3

Hinzufügen von ?wmode=opaque zu der URL scheint dieses Problem für mich zu lösen, obwohl ich es noch nicht in IE getestet habe.

Für diejenigen von Ihnen, die Probleme mit der zuvor vorgeschlagenen Lösung haben, beachten Sie, dass ein kommerzielles Ampersand nur funktioniert, wenn Sie bereits andere Argumente an die URL liefern. Das erste Argument muss ein erstes Fragezeichen haben: http://www.example.com?first=foo&second=bar

Answer 4

Fügen Sie &wmode=transparent zur URL hinzu und Sie sind fertig, getestet.

Ich verwende diese Technik in meinem eigenen Wordpress-Plugin YouTube shortcode

seinen Quellcode Überprüfen Sie, ob Sie ein Problem auftritt.

Answer 5

&wmode=opaque funktionierte nicht für mich (Chrom 10), aber &wmode=transparent löste das Problem bis oben.

Answer 6

Wenn Sie die neue asynchrone API verwenden, müssen Sie die Parameter wie so hinzuzufü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 basieren hier auf die Google-Dokumentation und Beispiel: http://code.google.com/apis/youtube/iframe_api_reference.html

Answer 7

Nur ein Tipp ! - stellen Sie sicher, dass Sie den Z-Index für das Element, das Sie über das eingebettete Video haben möchten, aufstellen. Ich habe die wmode Querystring hinzugefügt, und es hat immer noch nicht funktioniert ... bis ich den Z-Index des anderen Elements erhöht. :)

Answer 8

Ich weiß, dass dies eine alte Frage, aber es kommt immer noch für dieses Problem in den Top-Suchanfrage, so bin ich eine neue Antwort Hinzufügen der Suche nach einem für den IE zu helfen:

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

Allerdings fügt das Hinzufügen ?wmode=opaque den Trick!

---

diese Lösung hier gefunden: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Answer 9

vor kurzem sah ich, dass manchmal der Flash Player nicht &wmode=opaque nicht erkennt, Istead Sie &WMode=opaque auch (man beachte die Großschreibung) passieren sollte.