Problème avec Youtube iframe wmode

En utilisant javascript avec jQuery, j’ajoute un iframe avec une URL youtube pour afficher une vidéo sur un site Web, mais le code incorporé qui est chargé dans l’iframe à partir de YouTube n’a pas wmode = “Opaque”. sous la vidéo sur youtube.

Des idées sur la façon de résoudre le problème?

Essayez d’append ?wmode=opaque à l’URL ou &wmode=opaque s’il existe déjà un paramètre.

Si cela ne fonctionne pas, essayez plutôt ceci, &wmode=transparent qui fonctionnera également dans le navigateur IE.

Essayez d’append ?wmode=transparent à la fin de l’URL. Travaillé pour moi

Si vous utilisez la nouvelle API asynchrone, vous devrez append le paramètre comme suit:

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

Ceci est basé sur la documentation de google et l’exemple ici: http://code.google.com/apis/youtube/iframe_api_reference.html

Ajouter ?wmode=opaque à l’URL semble résoudre ce problème pour moi, même si je ne l’ai pas encore testé dans IE.

Pour ceux d’entre vous qui ont des problèmes avec la solution proposée précédemment, notez qu’une perluète initiale ne fonctionnera que si vous fournissez déjà d’autres arguments à l’URL. Le premier argument doit avoir un point d’interrogation initial: http://www.example.com?first=foo&second=bar

Ajoutez &wmode=transparent à l’URL et vous avez terminé, testé.

J’utilise cette technique dans mon propre shortcode

Vérifiez son code source si vous rencontrez un problème.

Juste un conseil! – Assurez-vous de placer le z-index sur l’élément que vous voulez placer sur la vidéo intégrée. J’ai ajouté la chaîne de requête wmode, et cela n’a toujours pas fonctionné … jusqu’à ce que j’ajoute l’index z de l’autre élément. 🙂

&wmode=opaque ne fonctionnait pas pour moi (chrome 10) mais &wmode=transparent effaçait le problème.

Je sais que c’est une vieille question, mais elle apparaît toujours dans les recherches principales pour ce problème, alors j’ajoute une nouvelle réponse pour aider ceux qui en recherchent une pour IE:

L’ajout de &wmode=opaque à la fin de l’URL ne fonctionne PAS dans IE 10 …

Cependant, append ?wmode=opaque fait l’affaire!


J’ai trouvé cette solution ici: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

Récemment, j’ai vu que parfois, le lecteur flash ne reconnaît pas &wmode=opaque , istead vous devriez passer &WMode=opaque aussi (notez les majuscules).