Problema wmode di YouTube iframe

Usando javascript con jQuery, sto aggiungendo un iframe con un url di youtube per visualizzare un video su un sito Web, tuttavia il codice embed che viene caricato nell’iframe da youtube non ha wmode = “Opaque”, quindi vengono mostrate le caselle modali nella pagina sotto il video di YouTube.

Qualche idea su come risolvere il problema?

Prova ad aggiungere ?wmode=opaque all’URL o &wmode=opaque se esiste già un parametro.

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

Prova ad aggiungere ?wmode=transparent alla fine dell’URL. Ha funzionato per me

Se stai usando la nuova API asincrona, dovrai aggiungere il parametro in questo modo:

  // 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  

Questo è basato sulla documentazione di google e sull’esempio qui: http://code.google.com/apis/youtube/iframe_api_reference.html

L’aggiunta di ?wmode=opaque all’URL sembra risolvere questo problema per me, sebbene non l’abbia ancora provato in IE.

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

Aggiungi &wmode=transparent all’URL e il gioco è fatto, testato.

Io uso questa tecnica nel mio shortcode di YouTube per il plugin wordpress

Controlla il suo codice sorgente se riscontri problemi.

Solo un consiglio! – assicurati di alzare lo z-index sull’elemento che vuoi includere nel video incorporato. Ho aggiunto wmode querystring e ancora non ha funzionato … fino a quando ho aumentato lo z-index dell’altro elemento. 🙂

&wmode=opaque non ha funzionato per me (chrome 10) ma &wmode=transparent risolto il problema.

So che questa è una vecchia domanda, ma si trova ancora nelle ricerche principali per questo problema, quindi aggiungo una nuova risposta per aiutare chi cerca uno per IE:

L’aggiunta di &wmode=opaque alla fine dell’URL NON funziona in IE 10 …

Tuttavia, aggiungendo ?wmode=opaque fa 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 , è necessario passare &WMode=opaque anche (notare la maiuscola).