Utilizzando 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 il le caselle modali sulla pagina sono mostrate sotto il video di youtube.Youtube iframe wmode issue
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, invece, &wmode=transparent che funzionerà anche nel browser IE.
bello!funziona su Firefox e Chrome ma per qualche motivo non funziona su IE ... qualche idea? – danfromisrael
prova usando & wmode = trasparente invece – Shabith
non funziona ... ho provato anche a giocare con z-index senza successo ... – danfromisrael
Prova ad aggiungere ?wmode=transparent alla fine dell'URL. Ha funzionato per me
"Trasparente" dovrebbe essere l'opzione preferita a mio parere. – Foxinni
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 inital funziona 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
Inizialmente ricevevo un rettangolo nero a prescindere dal video che stavo cercando di mostrare .. la macchina di prova non aveva il flash installato e il dialogo per l'installazione del flash era troppo sfalsato! – Zeb
Aggiungere &wmode=transparent all'URL e il gioco è fatto, testato.
Io uso questa tecnica nel mio plugin di YouTube shortcode
controllarne il codice sorgente, se si riscontra un problema.
Aggiunta & wmode = transparent dopo l'you tube URL Risolto il problema su tutti i browser. Grazie per Mr Tubal, Buon lavoro :) –
&wmode=opaque non ha funzionato per me (chrome 10) ma &wmode=transparent risolto il problema.
Se si sta utilizzando la nuova API asincrona, è 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 è sulla base della documentazione di Google e l'esempio qui: http://code.google.com/apis/youtube/iframe_api_reference.html
Nota che questo ha anche bisogno di wmode in playerVars. Quando è appena sotto YT.Player, funzionerà solo per il player HTML5. L'aggiunta di wmode a playerVars invia anche quel parametro all'oggetto Flash, che ha il proprio problema di ordine z. Vedi qui: https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/OQRG5rTKBFQ Modifica la tua risposta di conseguenza. –
Ho provato questo e non ha funzionato. Inoltre non ho trovato alcun riferimento a wmode nella documentazione di YouTude. – sboisse
Il collegamento è stato modificato dalla prima volta, così come il metodo per l'impostazione della wmode. Puoi impostare qualsiasi parametro flash ora o il parametro del player youtube tramite playerVars. Ho aggiornato l'esempio precedente. –
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. :)
So che questa è una vecchia questione, ma si tratta ancora in piedi tra le prime ricerche di questo problema in modo da sto aggiungendo una nuova risposta per aiutare coloro che cercano uno per IE:
Aggiunta &wmode=opaque a la fine dell'URL NON funziona in IE 10 ...
Tuttavia, l'aggiunta di ?wmode=opaque fa il trucco!
trovato questa soluzione qui: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
'&' e '?' Sono entrambi corretti in base all'ordine di utilizzo e alle altre impostazioni incluse nell'URL. Ovviamente '?' Viene usato se questa è la prima (o unica) impostazione, '&' altrimenti. – Alex
Sì, ma IE ha esigenze particolari. Basta provare e vedere quali opere in IE 10 e quali no. Non ho ancora provato questo in IE 11. –
Recentemente ho visto che a volte il flash player non riconosce &wmode=opaque, Istead si dovrebbe passare troppo &WMode=opaque (notare la maiuscola).
È ancora un problema? Ho usato questa soluzione in precedenza ma non riesco a riprodurre il problema originale nell'ultimo Chrome/Firefox/IE. – marcovtwout