Youtube iframe wmode problème

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 de 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?

133
demandé sur snakeyyy 2010-10-29 14:31:04

9 réponses

Essayez d'Ajouter ?wmode=opaque à L'URL ou &wmode=opaque s'il existe déjà un paramètre.

Si cela ne fonctionne pas, essayez ceci à la place, &wmode=transparent qui fonctionnera également dans le navigateur IE.

237
répondu Shabith 2015-08-23 07:23:58

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

81
répondu Casper 2011-06-16 03:30:32

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

18
répondu Plastic Sturgeon 2013-10-17 19:11:12

L'ajout de ?wmode=opaque à L'URL semble résoudre ce problème pour moi, bien que je ne l'aie 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 esperluette inital 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

8
répondu Markus Amalthea Magnuson 2011-02-09 00:45:19

Ajoutez &amp;wmode=transparent à l'url et vous avez terminé, testé.

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

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

3
répondu Túbal Martín 2011-02-28 11:49:32

Juste un pourboire!--assurez-vous de le z-index sur l'élément que vous voulez être sur la vidéo intégrée. J'ai ajouté le wmode querystring, et cela n'a toujours pas fonctionné...jusqu'à ce que j'ai augmenté l'index z de l'autre élément. :)

1
répondu Tyson Phalp 2012-10-17 09:03:20

&wmode=opaque cela n'a pas fonctionné pour moi (chrome 10) mais &amp;wmode=transparent a réglé le problème.

0
répondu imjared 2011-03-29 17:25:41

Je sais que c'est une vieille question, mais elle apparaît toujours dans les meilleures recherches pour ce problème, donc 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, ajouter ?wmode=opaque fait l'affaire!


Trouvé cette solution ici: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements

0
répondu Amber Blahnik 2013-08-16 21:06:47

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).

0
répondu Nereo Costacurta 2015-10-12 17:17:34