Problem z wmode iframe YouTube

Używając javascript z jQuery, dodaję ramkę iframe z adresem URL youtube, aby wyświetlić wideo na stronie internetowej, jednak kod osadzania, który jest ładowany w ramce iframe z youtube, nie ma wmode = "Nieprzezroczysty", dlatego wyświetlane są modalne pola na stronie pod filmem z YouTube.

Jakieś pomysły, jak rozwiązać problem?

Spróbuj dodać ?wmode=opaquedo adresu URL lub &wmode=opaquejeśli istnieje już parametr.

Jeśli to nie zadziała, spróbuj tego zamiast tego, &wmode=transparentco będzie działać również w przeglądarce IE.

Spróbuj dodać ?wmode=transparentna końcu adresu URL. Pracował dla mnie.

Jeśli korzystasz z nowego asynchronicznego interfejsu API, musisz dodać parametr w następujący sposób:

<!-- 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
      }
    });
}

Jest to oparte na dokumentacji Google i przykładzie tutaj: http://code.google.com/apis/youtube/iframe_api_reference.html

Dodanie ?wmode=opaquedo adresu URL wydaje mi się rozwiązywać ten problem, chociaż jeszcze nie testowałem tego w IE.

Dla tych z Was, którzy mają problemy z poprzednio proponowanym rozwiązaniem, pamiętajcie, że początkowy znak ampersand będzie działał tylko wtedy, gdy już dostarczacie inne argumenty do adresu URL. Pierwszy argument musi mieć początkowy znak zapytania:http://www.example.com?first=foo&second=bar

Dodaj &wmode=transparentdo adresu URL i gotowe, przetestowane.

Używam tej techniki w mojej własnej wtyczce Wordpress na YouTube

Sprawdź jego kod źródłowy, jeśli napotkasz jakikolwiek problem.

Tylko wskazówka! - upewnij się, że zwiększyłeś indeks z elementu, który chcesz umieścić nad osadzonym wideo. Dodałem querystring wmode i nadal nie działał ... dopóki nie podwyższyłem indeksu z drugiego elementu. :)

&wmode=opaquenie działało dla mnie (chrome 10), ale &wmode=transparentod razu rozwiązałem problem.

Wiem, że to stare pytanie, ale wciąż pojawia się w najpopularniejszych wyszukiwaniach tego problemu, więc dodaję nową odpowiedź, aby pomóc tym, którzy szukają takiego dla IE:

Dodawanie &wmode=opaquena końcu adresu URL NIE działa w IE 10 ...

Jednak dodanie ?wmode=opaquezałatwia sprawę!

Znalazłem to rozwiązanie tutaj: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

ostatnio widziałem, że czasami Flash Player nie rozpoznaje &wmode=opaque, ale powinieneś &WMode=opaqueteż przejść (zwróć uwagę na duże litery).