Problem z wmode iframe YouTube

134

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?

snakeyyy
źródło
Czy to nadal problem? Korzystałem już z tego rozwiązania, ale nie mogę odtworzyć oryginalnego problemu w najnowszej przeglądarce Chrome / Firefox / IE.
marcovtwout

Odpowiedzi:

238

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.

Shabith
źródło
1
miły! działa na Firefox i Chrome, ale z jakiegoś powodu nie działa na IE ... jakieś pomysły?
danfromisrael
31
spróbuj zamiast tego użyć & amp; wmode = transparent
Shabith,
29
Ustawienie „& amp; wmode = xxxx” zakłada, że ​​już przekazujesz parametry w adresie URL. Nie byłem w moim przypadku, więc zamiast tego muszę dodać „? Wmode = xxxx” do adresu URL.
Matt Huggins
6
Różnice między opaqueitransparent . opaquepowinien być bardziej wydajny.
pączek
3
Shabith - „wmode = Opaque” powinno mieć wartość „wmode = opaque” (małe litery „o”)
Jan
81

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

Kacper
źródło
Moim zdaniem opcja „przejrzysta” powinna być preferowaną opcją.
Foxinni
18

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

Jesiotr Plastikowy
źródło
7
Zauważ, że to RÓWNIEŻ wymaga wmode w playerVars. Kiedy znajduje się tuż pod YT.Player, będzie działać tylko dla odtwarzacza HTML5. Dodanie wmode do playerVars powoduje również wysłanie tego parametru do obiektu Flash, który ma własny problem z kolejnością osi Z. Zobacz tutaj: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Odpowiednio zmodyfikuję Twoją odpowiedź.
Dylan McCall
1
Próbowałem tego i nie udało się. W dokumentacji YouTude nie znalazłem również żadnego odniesienia do wmode.
sboisse
Link zmienił się od czasu, gdy po raz pierwszy opublikowałem, podobnie jak metoda ustawiania wmode. Możesz ustawić dowolny parametr flash teraz lub parametr odtwarzacza youtube poprzez playerVars. Zaktualizowałem powyższy przykład.
Plastikowy Jesiotr
Ładowanie całego interfejsu API tylko po to, aby zmienić wartość, którą można łatwo zmienić w adresie URL, jest całkowitą przesadą. Nie używaj tego.
fregante
Niektórzy z nas pracują z odtwarzaczem chromeless i już używają API JS do sterowania interfejsem użytkownika. Dla nas to rozwiązanie totalnie rządzi! Dzięki
maxijb
8

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

Markus Amalthea Magnuson
źródło
Początkowo otrzymywałem czarny prostokąt, niezależnie od wideo, które próbowałem pokazać ... okazało się, że maszyna testowa nie miała zainstalowanej pamięci flash, a okno dialogowe instalacji lampy błyskowej było zbyt mocno przesunięte!
Zeb,
3

Dodaj &amp;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.

Túbal Martín
źródło
Dodanie & amp; wmode = transparent po adresie URL you tube Rozwiązało problem we wszystkich przeglądarkach. Dzięki dla pana Tubala, dobra robota :)
1

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

Tyson Phalp
źródło
0

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

imjared
źródło
0

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

Bursztynowy czerwiec
źródło
&i ?oba są poprawne w zależności od kolejności ich używania i innych ustawień zawartych w adresie URL. Oczywiście ?jest używane, jeśli jest to pierwsze (lub jedyne) ustawienie, w &przeciwnym razie.
Alex
Tak, ale IE ma specjalne potrzeby. Po prostu spróbuj i zobacz, które działa w IE 10, a które nie. Nie próbowałem jeszcze tego w IE 11.
Bursztynowy czerwiec
0

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

Nereo Costacurta
źródło