Problema de wmode de iframe de YouTube


134

Utilizando JavaScript con jQuery, estoy agregando un iframe con una url de youtube para mostrar un video en un sitio web, sin embargo, el código de inserción que se carga en el iframe de youtube no tiene wmode = "Opaque", por lo tanto, se muestran los cuadros modales en la página debajo del video de youtube.

¿Alguna idea de cómo resolver el problema?


¿Sigue siendo un problema? Utilicé esta solución antes pero no puedo reproducir el problema original en el último Chrome / Firefox / IE.
marcovtwout

Respuestas:


238

Intente agregar ?wmode=opaquea la URL o &wmode=opaquesi ya hay un parámetro.

Si no funciona, intente esto, &wmode=transparentque también funcionará en el navegador IE.


1
¡bonito! funciona en Firefox y Chrome, pero por alguna razón no funciona en IE ... ¿alguna idea?
danfromisrael

31
intente usar & amp; wmode = transparent en su lugar
Shabith

29
La configuración "& amp; wmode = xxxx" supone que ya está pasando parámetros en la URL. No estaba en mi caso, por lo que necesito agregar "? Wmode = xxxx" a la URL.
Matt Huggins

66
Diferencias entre opaqueytransparent . opaqueSe supone que es más eficiente.
donut

3
Shabith - "wmode = Opaque" debe ser "wmode = opaque" ('o' minúscula)
John

81

Intente agregar ?wmode=transparental final de la URL. Trabajó para mi.


'Transparente' debería ser la opción preferida en mi opinión.
Foxinni

18

Si está utilizando la nueva API asincrónica, deberá agregar el parámetro de la siguiente manera:

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

Esto se basa en la documentación y el ejemplo de Google aquí: http://code.google.com/apis/youtube/iframe_api_reference.html


77
Tenga en cuenta que TAMBIÉN necesita wmode en playerVars. Cuando está justo debajo de YT.Player, solo funcionará para el reproductor HTML5. Agregar wmode a playerVars también envía ese parámetro al objeto Flash, que tiene su propio problema de orden z. Vea aquí: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/… Editaré su respuesta en consecuencia.
Dylan McCall

1
Intenté esto y no funcionó. Tampoco encontré ninguna referencia a wmode en la documentación de YouTude.
sboisse

El enlace cambió desde que publiqué por primera vez, al igual que el método para configurar el wmode. Puede configurar cualquier parámetro flash ahora o el parámetro del reproductor de YouTube a través de playerVars. He actualizado el ejemplo anterior.
Esturión de plástico

Cargar una API completa solo para cambiar un valor que se puede cambiar fácilmente en la URL es una exageración total. No uses esto.
fregante

Algunos de nosotros trabajamos con el reproductor sin Chrome y ya usamos la API JS para controlar la interfaz de usuario. Para nosotros, ¡esta solución es genial! Gracias
maxijb

8

Agregar ?wmode=opaquea la URL parece resolver este problema para mí, aunque todavía no lo he probado en IE.

Para aquellos de ustedes que tengan problemas con la solución propuesta anteriormente, tengan en cuenta que un ampersand inicial solo funcionará si ya están proporcionando otros argumentos a la URL. El primer argumento debe tener un signo de interrogación inicial:http://www.example.com?first=foo&second=bar


Inicialmente recibía un rectángulo negro independientemente del video que estaba tratando de mostrar ... ¡resultó que la máquina de prueba no tenía flash instalado y el diálogo para instalar el flash estaba demasiado compensado!
Zeb

3

Agregue &amp;wmode=transparenta la url y ya está, probado.

Uso esa técnica en mi propio código abreviado de YouTube de plugin de WordPress

Verifique su código fuente si encuentra algún problema.


Añadiendo & amp; wmode = transparent después de la URL de you tube Se resolvió el problema en todos los navegadores. Gracias por el Sr. Tubal, buen trabajo :)

1

Solo un consejo: asegúrese de subir el índice z en el elemento que desea que esté sobre el video incrustado. Agregué la cadena de consulta wmode, y todavía no funcionó ... hasta que subí el índice z del otro elemento. :)


0

&wmode=opaqueno funcionó para mí (Chrome 10) pero &amp;wmode=transparentresolvió el problema de inmediato.


0

Sé que esta es una pregunta antigua, pero aún aparece en las búsquedas principales de este problema, por lo que agrego una nueva respuesta para ayudar a aquellos que buscan una para IE:

Agregar &wmode=opaqueal final de la URL NO funciona en IE 10 ...

Sin embargo, ¡agregar ?wmode=opaquehace el truco!


Encontré esta solución aquí: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements


&y ?ambos son correctos según el orden en que se usan y qué otras configuraciones se incluyen en la URL. Obviamente ?se usa si esta es la primera (o única) configuración, de lo &contrario.
Alex

Sí, pero IE tiene necesidades especiales. Simplemente pruébelo y vea cuál funciona en IE 10 y cuál no. No he probado esto en IE 11 todavía.
Amber junio

0

Hace poco vi que a veces el reproductor Flash no reconoce &wmode=opaque, sino que también debe pasar &WMode=opaque(observe la mayúscula).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.