Problema de wmode de iframe de YouTube

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?

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.

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

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

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

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

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

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

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

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