iPhone youtube vidéo z-index

Question

J'ai une vidéo YouTube intégrée dans une page. J'ai aussi un menu (lorsqu'il est ouvert) est au-dessus de cette vidéo.

J'ai défini la valeur de l'index z du menu sur une valeur supérieure à celle de la vidéo. J'ai également réglé le wmode de la vidéo sur transparent pour permettre le contenu sur le dessus. Je n'ai aucun problème avec safari, c'est-à-dire, chrome ou firefox sur mon ordinateur (le menu est en haut de la vidéo, comme il se doit), mais sur l'iPhone et l'iPad - le contenu flash remplacé par un gros bouton youtube cliquable qui ouvre le youtube embarqué dans l'application youtube, et ce gros bouton est au dessus du menu. Est-ce que quelqu'un sait comment résoudre ce problème?

Merci!

Answer 1

Je ne sais pas si c'est ce dont vous avez besoin. Un exemple en direct sur jsbin.com aiderait. Quoi qu'il en soit, j'espère que ce qui suit sera utile. Vous pouvez utiliser la méthode iframe que propose YouTube pour lire ses vidéos. Si le navigateur prend en charge html5 affichera la vidéo avec elle, sinon avec flash. En outre, il joue parfaitement avec iphone/ipad sans ouvrir l'application de l'iphone/ipad.

Vous pouvez utiliser le code suivant comme un exemple < iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/bIPcobKMB94" frameborder="0">

dans l'exemple ci-dessus l'ID vidéo est bIPcobKMB94. Vous pouvez changer cet identifiant et montrer votre vidéo.

Vous pouvez accéder à votre iPhone un exemple vivant de celui-ci here

More infromation for youtube iframe

YouTube HTML5 Video Player

Answer 2

iPad et iPhone unfortunatly ne pas afficher du contenu Flash. Il utilise la version h.264 des vidéos. Par conséquent, c'est un plugin entièrement différent qui joue réellement le contenu et le réglage du Wmode du fichier flash ne fera aucune différence.

EDIT J'ai regardé et je n'ai aucune solution pour le problème d'ipad/sefari/iphone.

Answer 3

Je soupçonne que l'application utilisée pour désactiver le contenu définit un niveau d'index z en ligne. Je trouverais l'ID de cet élément (le bouton ou son conteneur) et définir l'indice z inférieur à votre menu z-index. Assurez-vous d'inclure '! Important' après la valeur pour vous assurer qu'il écrase le style en ligne.

Answer 4

J'ai également rencontré ce problème. Après avoir ajouté le paramètre "wmode=transparent" pour le code

<iframe width="480" height="360" src="http://www.youtube.com/embed/111111?wmode=transparent" frameborder="0" allowfullscreen></iframe>,

le problème est résolu.