Problème de wmode iframe Youtube

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 d'intégration qui est chargé dans l'iframe depuis youtube n'a pas wmode = "Opaque", donc les boîtes modales sur la page sont affichées sous la vidéo youtube.

Des idées pour résoudre le problème?

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

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

Essayez d'ajouter ?wmode=transparentà la fin de l'URL. A travaillé pour moi.

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

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

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

L'ajout ?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 ayant des problèmes avec la solution proposée précédemment, notez qu'une esperluette 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 code court YouTube pour le plugin wordpress

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

Juste un conseil! - assurez-vous que vous montez le z-index sur l'élément que vous voulez voir sur la vidéo intégrée. J'ai ajouté la chaîne de requête wmode, et cela ne fonctionnait toujours pas ... jusqu'à ce que j'augmente le z-index de l'autre élément. :)

&wmode=opaquen'a pas fonctionné pour moi (chrome 10) mais a &wmode=transparentrésolu le problème immédiatement.

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

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

Cependant, l'ajout ?wmode=opaquefait l'affaire!

Trouvez 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, c'est que vous devriez passer &WMode=opaqueaussi (notez les majuscules).