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
- Affichage responsive de la video quelque part sur le site (actualité, page,...) :