Problema wmode iframe su Youtube

Usando javascript con jQuery, sto aggiungendo un iframe con un URL di YouTube per visualizzare un video su un sito Web, tuttavia il codice di incorporamento che viene caricato nell'iframe da YouTube non ha wmode = "Opaque", quindi vengono visualizzate le caselle modali sulla pagina sotto il video di YouTube.

Qualche idea su come risolvere il problema?

Prova ad aggiungere ?wmode=opaqueall'URL o &wmode=opaquese esiste già un parametro.

Se non funziona, prova questo, &wmode=transparentche funzionerà anche nel browser IE.

Prova ad aggiungere ?wmode=transparentalla fine dell'URL. Ha funzionato per me.

Se si utilizza la nuova API asincrona, sarà necessario aggiungere il parametro in questo modo:

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

Questo si basa sulla documentazione di Google ed esempio qui: http://code.google.com/apis/youtube/iframe_api_reference.html

L'aggiunta ?wmode=opaqueall'URL sembra risolvere questo problema per me, anche se non l'ho ancora testato in IE.

Per quelli di voi che hanno problemi con la soluzione proposta in precedenza, nota che una e commerciale iniziale funzionerà solo se stai già fornendo altri argomenti all'URL. Il primo argomento deve avere un punto interrogativo iniziale:http://www.example.com?first=foo&second=bar

Aggiungi &wmode=transparentall'URL e il gioco è fatto, testato.

Uso questa tecnica nel mio shortcode YouTube del mio plugin wordpress

Controlla il suo codice sorgente in caso di problemi.

Solo un consiglio! - Assicurati di aumentare l'indice z sull'elemento che desideri posizionare sul video incorporato. Ho aggiunto la querystring wmode, e ancora non ha funzionato ... fino a quando non ho aumentato l'indice z dell'altro elemento. :)

&wmode=opaquenon ha funzionato per me (Chrome 10) ma ha &wmode=transparentrisolto il problema.

So che questa è una vecchia domanda, ma emerge ancora nelle prime ricerche per questo problema, quindi sto aggiungendo una nuova risposta per aiutare coloro che cercano uno per IE:

L'aggiunta &wmode=opaquealla fine dell'URL NON funziona in IE 10 ...

Tuttavia, l'aggiunta ?wmode=opaquefa il trucco!

Ho trovato questa soluzione qui: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

recentemente ho visto che a volte il flash player non riconosce &wmode=opaque, ma dovresti passare &WMode=opaqueanche tu (nota la maiuscola).