web-dev-qa-db-fra.com

Youtube iframe wmode issue

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é chargé dans l'iframe à partir de youtube n'a pas wmode = "Opaque", les cases modales de la page sont affichées. sous la vidéo youtube.

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

iframeyoutubewmode
133
snakeyyy

Essayez d'ajouter ?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.

238
Shabith

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

81
Casper

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 exemple ici: http://code.google.com/apis/youtube/iframe_api_reference.html

18
Plastic Sturgeon

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

Pour ceux d'entre vous qui ont 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

8
Markus Amalthea Magnuson

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

J'utilise cette technique dans mon propre wordpress shortcode YouTube

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

3
Túbal Martín

Juste un conseil! - Assurez-vous de bien monter l'index z sur l'élément que vous souhaitez placer 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'ai augmenté l'indice z de l'autre élément. :)

1
Tyson Phalp

récemment, j'ai vu que parfois le lecteur flash ne reconnaît pas &wmode=opaque, tu devrais passer &WMode=opaque _ aussi (remarquez la majuscule).

0
Nereo Costacurta

&wmode=opaque n'a pas fonctionné pour moi (chrome 10) mais &amp;wmode=transparent éclaircit la question.

0
imjared

Je sais que c’est une vieille question, mais elle figure toujours dans les recherches les plus fréquentes concernant ce problème. J’ajoute donc une nouvelle réponse pour aider ceux qui en recherchent un pour IE:

Ajouter &wmode=opaque à la fin de l’URL ne fonctionne PAS dans IE 10 ...

Cependant, en ajoutant ?wmode=opaque fait le tour!

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

0
Amber Blahnik