Problème de wmode iframe Youtube


134

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?


Est-ce toujours un problème? J'ai utilisé cette solution avant mais je ne peux pas reproduire le problème d'origine dans la dernière version de Chrome / Firefox / IE.
marcovtwout

Réponses:


238

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.


1
agréable! fonctionne sur Firefox et Chrome, mais pour une raison quelconque, ne fonctionne pas sur IE ... des idées?
danfromisrael

31
essayez d'utiliser & amp; wmode = transparent à la place
Shabith

29
Le paramètre "& amp; wmode = xxxx" suppose que vous transmettez déjà des paramètres dans l'URL. Je n'étais pas dans mon cas, donc je dois à la place ajouter "? Wmode = xxxx" à l'URL.
Matt Huggins

6
Différences entre opaqueettransparent . opaqueest censé être plus performant.
donut le

3
Shabith - "wmode = Opaque" devrait être "wmode = opaque" (minuscule 'o')
Jean

81

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


«Transparent» devrait être l'option préférée à mon avis.
Foxinni

18

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


7
Notez que cela a également besoin de wmode dans playerVars. Lorsqu'il est juste sous YT.Player, cela ne fonctionnera que pour le lecteur HTML5. L'ajout de wmode à playerVars envoie également ce paramètre à l'objet Flash, qui a son propre problème d'ordre z. Voir ici: groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/ ... Je modifierai votre réponse en conséquence.
Dylan McCall

1
J'ai essayé cela et cela n'a pas fonctionné. Je n'ai pas non plus trouvé de référence à wmode dans la documentation YouTude.
sboisse

Le lien a changé depuis ma première publication, tout comme la méthode de paramétrage du wmode. Vous pouvez définir n'importe quel paramètre flash maintenant ou paramètre de lecteur youtube via playerVars. J'ai mis à jour l'exemple ci-dessus.
Esturgeon en plastique du

Charger une API entière juste pour changer une valeur qui peut être facilement modifiée dans l'URL est une exagération totale. N'utilisez pas ça.
fregante

Certains d'entre nous travaillent avec le lecteur chromeless et utilisent déjà l'API JS pour contrôler l'interface utilisateur. Pour nous, cette solution est totalement géniale! Merci
maxijb

8

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


Au départ, j'obtenais un rectangle noir quelle que soit la vidéo que j'essayais de montrer. Il s'est avéré que la machine de test n'avait pas de flash installé et que le dialogue pour installer le flash était trop décalé!
Zeb

3

Ajoutez &amp;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.


L'ajout de & amp; wmode = transparent après l'URL you tube a résolu le problème dans tous les navigateurs. Merci pour M. Tubal, bon travail :)

1

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


0

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


0

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


&et ?sont tous les deux corrects en fonction de l'ordre dans lequel ils sont utilisés et des autres paramètres inclus dans l'URL. Il ?est évidemment utilisé s'il s'agit du premier (ou du seul) paramètre, &sinon.
Alex le

Oui, mais IE a des besoins spéciaux. Essayez-le et voyez ce qui fonctionne dans IE 10 et ce qui ne fonctionne pas. Je n'ai pas encore essayé cela dans IE 11.
Ambre juin

0

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.