Youtube iframe wmode Problem

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?

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.

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

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

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

Fügen Sie &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.

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. :) :)

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

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

&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).