Firefox affiche incorrectement la vidéo iframe youtube

Question

J'ai utilisé l'excellent plugin jQuery swiper (http://www.idangero.us/sliders/swiper/) pour créer une interface de lecteur de défilement qui affiche le contenu "slide" par "slide", chaque diapositive étant <article>. J'ai besoin de quelques diapositives pour afficher la vidéo Youtube, en utilisant la méthode standard <iframe>. Cela fonctionne bien dans Safari et Chrome, mais dans Firefox une chose étrange se produit. L'interface du lecteur fait 760 pixels de large (tout est dans un élément de la section > auquel cette largeur est affectée), et dans une fenêtre étroite, Firefox affiche simplement un rectangle noir au lieu du lecteur vidéo YouTube. Cependant, si la fenêtre de Firefox est large de 1521 pixels ou plus large (c'est-à-dire plus de deux fois la largeur du lecteur), le lecteur Youtube apparaît au bon endroit - mais aucune interface n'est cliquable (des changements de survol se produisent cependant).

De plus, si je clique avec le bouton droit de la souris sur le lecteur Youtube dans Firefox, le menu contextuel Flash apparaît sur mon écran sur 1 000 pixels à droite du lecteur Flash.

C'est très étrange - j'ai mis une démo à http://backattheranch.ca/matt/player/ pour que les gens puissent y passer. Toute aide serait appréciée. Merci!

Answer 1

C'est l'transform: translate3d(); sur l'élément parent .swiper-wrapper. Nous avons rencontré un problème similaire et la suppression de cette transformation sur un élément parent l'a corrigé.

Pour recréer ce que est la question qui vous concernent:

1. Sur votre page d'exemple, sélectionnez l'élément # 3 - qui a une vidéo. Pop open FireBug, sélectionnez l'élément div.swiper-wrapper.
2. Dans l'éditeur CSS, 'x' sort translate3d à la fois sur element.style et dans la classe .swiper-wrapper. Votre vidéo va disparaître, mais n'ayez pas peur! Pour le ramener et le test que tel est bien le problème,

3. Entrez le CSS suivant dans le element.style dans l'éditeur de Firebug:

   left: -1520px

Votre vidéo réapparaît, et vous Je vais voir que c'est cliquable, et joue. J'ai juste jeté un coup d'oeil au site Web d'idangero.us, et je ne vois pas une mise à jour pour ce problème; On dirait que leur joueur utilise la transformation translate3d pour faire glisser des choses. Malheureusement, cela signifie que vous allez devoir trouver une autre solution de swiper qui n'utilise pas le translate3d pour positionner vos éléments, ou demander qu'ils corrigent cela et attendent le correctif.

Je recommande fortement Malsup's Cycle 2, si vous êtes bloqué pour un déflecteur qui prend en charge la vidéo. Très extensible, bien documenté. Vous pouvez voir un demo of the slider running video, working in Firefox here.

Dans le Malsup Cycle 2 downloads, vous trouverez des plugins à effleurement tactiles qui permettent touch features.

Nous utilisons le cycle 2 sur le Getty's website, mais malheureusement aucun de nos curseurs n'affiche actuellement la vidéo.