jQuery Girl
  1. jQuery Girl
  3. fancyBox – La vidéo YouTube ne s’affichera pas
Intereting Posts
jQuery ui.draggable événement / statut sur revenir Jquery Ajax Post Data dans un fichier local jQuery Ajax – téléchargement d’un fichier incomplet (binary) Jquery datatable avec case à cocher dans l’en-tête et dans la ligne: cochez toutes les cases qui ne fonctionnent pas Comment supprimer l’atsortingbut width qui est sous l’atsortingbut style à l’aide de jQuery? JQuery .click () ne fonctionne pas sur ajouté à partir de ajax Comment faire fonctionner cet itinéraire de base? Confusion sur le fonctionnement du partage de ressources d’origine croisée (CORS) Limiter le nombre de cases à cocher à sélectionner, jQuery Meilleure pratique JQuery, en utilisant $ (document) .ready dans un IIFE? Ajax Paging – Enable Back Button Gestion des modèles JSON dans JS / ERB dans Rails 3 Aligner verticalement le milieu du texte dans jQuery Mobile Button? scrollTop ne fonctionne pas dans les mobiles Android nouvel élément créé qui appelle la méthode jquery après que le document soit prêt ne fonctionne pas

fancyBox – La vidéo YouTube ne s’affichera pas

Voici mon HTML: 

Video

Et jQuery 

 $(document).ready(function() { $(".various").fancybox({ maxWidth : 800, maxHeight : 600, fitToView : false, width : '70%', height : '70%', autoSize : false, closeClick : false, openEffect : 'elastic', closeEffect : 'none' }); });

J’ai modifié mon code à partir d’une démonstration utilisant la version la plus récente de fancyBox, et une vidéo ne s’affichera que si j’utilise la vidéo utilisée dans la démonstration.

Le problème est que ce format d’URL 

 http://www.youtube.com/watch?v=PzBk4-awY40

… ne fonctionnera pas avec le mode iframe (vous définissez la classe fancybox.iframe dans votre lien).

Vous pouvez utiliser plutôt le format embedded de YouTube, qui fonctionne sur les appareils ne prenant pas en charge la technologie Flash. 

 http://www.youtube.com/embed/PzBk4-awY40

De plus, vous pouvez append le paramètre de fin ?autoplay=1 si vous souhaitez que vos vidéos commencent juste après l’ouverture de fancybox.

JSFIDDLE

NOTES :

  • Si vous voulez vraiment vous en tenir au format /watch?v= URL (les liens sont définis par l’utilisateur ou de manière dynamic), supprimez la classe fancybox.iframe de votre lien et utilisez plutôt l’assistant fancybox media . Consultez http://fancyapps.com/fancybox/#examples ==> fonctionnalité étendue pour plus d’informations.
  • pour éviter un problème connu d’iframe (principalement avec IE), je vous conseillerais de définir le préchargement d’iframe sur false , consultez la page https://stackoverflow.com/a/16595607/1055987.