Zenphoto gère différent type de fichier multimédia (image, vidéo, musique,...) hébergés sur son propre espace Web, mais n'est nativement pas prévu pour gérer les vidéos online (par exemple les vidéos hébergées sur YouTube).

Mais en fait, il existe bien un moyen depuis Zenphoto 1.2.6 pour ajouter des vidéos online dans la gallerie (voir ici pour tous les détails) :

  • Dans les onglets Admin, activer le plugin class-textobject
  • Dans un album de votre galerie, télécharger un fichier texte (.txt, .htm ou .html) contenant un code intégré vers votre vidéo
  • Eventuellement utiliser une vignette différente de celle par défaut en suivant ces instructions


J'ai fait quelques adaptations sur le thème zpBootstrap pour gérer ces vidéos dans la galerie (sur GitHub, utiliser la version master). En particulier, l'affichage des vidéos est responsive, et les vidéos hébergées sur YouTube et Vimeo peuvent être lues directement depuis FancyBox.

Cependant, pour combiner les exigences de Bootstrap et de FancyBox, le code html décrivant la vidéo intégrée doit avoir la structure suivante :

  • YouTube 
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&rel=0"></iframe>
</div>
  • Vimeo 
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="//player.vimeo.com/video/76979871?autoplay=1" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

En effet, Zenphoto ne connait pas le format de la vidéo intégrée alors que Boostrap en a besoin pour gérer correctement son affichage. Chaque fichier de vidéo doit donc décrire le bon format de la vidéo, avec une des 2 classes css fournies par Bootstrap :

  • class="embed-responsive-16by9" pour les vidéos au format 16/9
  • class="embed-responsive-4by3" pour les vidéos au format 4/3


Voici le résultat avec une vidéo Viméo :

  • Affichage de la vignette de la video dans un album de la galerie (ouverture de la vidéo dans FancyBox) :
vimeo

vimeo

  • Affichage responsive de la video quelque part sur le site (actualité, page,...) :