Problème d'iframe Youtube wmode

Question

En utilisant JavaScript avec jQuery, j'ajoute un iframe avec une URL YouTube pour afficher une vidéo sur un site web, cependant, le code d'intégration chargé dans l'iframe depuis YouTube n'a pas de wmode="Opaque", donc les boîtes modales sur la page sont affichées sous la vidéo YouTube.

Des idées sur comment résoudre ce problème?

Answer 1

Essayez d'ajouter ?wmode=opaque à l'URL ou &wmode=opaque s'il y a déjà un paramètre.

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

Answer 2

Essayez d'ajouter ?wmode=transparent à la fin de l'URL. Ça a fonctionné pour moi.

Answer 3

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

// 2. Ce code charge de manière asynchrone le code de l'API lecteur IFrame.
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. Cette fonction crée un  (et le lecteur YouTube)
//    après le téléchargement du code de l'API.
var player;
var initialVideo = 'ApkM4t9L5jE'; // VOTRE IDENTIFIANT VIDÉO YOUTUBE
function onYouTubePlayerAPIReady() {
    console.log("onYouTubePlayerAPIReady" + initialVideo);
    player = new YT.Player('player', {
      height: '381',
      width: '681',
      wmode: 'transparent', // SECRET SAUCE ICI
      videoId: initialVideo,      
       playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
}
</code></pre>

<p>Ceci est basé sur la documentation de Google et l'exemple ici :
<a href="http://code.google.com/apis/youtube/iframe_api_reference.html">http://code.google.com/apis/youtube/iframe_api_reference.html</a></p></x-turndown>

Answer 4

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

Pour ceux d'entre vous qui ont des problèmes avec la solution précédemment proposée, notez qu'un esperluette initial 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

Answer 5

Ajoutez &wmode=transparent à l'URL et c'est fait, testé.

J'utilise cette technique dans mon propre plugin wordpress YouTube shortcode

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