Une galerie vidéo simple et facile avec Fotorama
 

Retrouvez les vidéos de cette présentation, et toutes les vidéos des " Marins d'Iroise " sur ce lien.

 

Le contenu de l'article de la galerie, c'est une citation de code, vous pouvez faire du copier/coller :

 

<p style="text-align: center;margin: 0 auto;"><span style="font-size:20px;">Une galerie vidéo simple et facile avec Fotorama</span><br />
&nbsp;</p>

<div style="text-align: center;margin: 0 auto;padding: 2%;background-color: #c0cfd5;border-radius: 6px;">
<div class="fotorama" data-nav="thumbs">
<a data-video="true" href="../img/videos/santiano.mp4" target="_self"><img alt="marins01.jpg" src="../img/videos/marins01.jpg" style="" title="" /></a>
<a data-video="true" href="../img/videos/amsterdam.mp4" target="_self"><img alt="marins02.jpg" src="../img/videos/marins02.jpg" /></a>
<a data-video="true" href="../img/videos/lescopainsdabord.mp4" target="_self"><img alt="marins03.jpg" src="../img/videos/marins03.jpg" /></a></div>
</div>

Quelques commentaires sur le minimum de modifications à faire.

Voici les modifications que vous pouvez ou que vous devez apporter pour un fonctionnement correct de la lecture des vidéos.

•  font-size : 20px : ceci concerne le titre "Une galerie vidéo simple et facile", au choix 20.22, 24px pour rester dans le raisonnable.
   
• #c0cfd5 : c'est la couleur de fond du div pour centrer les images et les vidéos, je l'ai adapté à ma skin d'origine
   
• Pour les mp4, ils doivent être encodés en H264 avec une taille de 720px en 16/9 avec une qualité DVD.
  J'ai créé un répertoire videos dans img, si vous le faites, vous n'avez que le nom du mp4 à modifier.
   
• Pour les images, j'ai capturé une image de chaque vidéo en jpg, la taille est de 900 x 519px en 16/9 pour un affichage avec une colonne latérale, pour un affichage sans colonne latérale la taille sera de 1240x715px
   
• J'ai incrusté le titre et le nom du groupe dans chaque image. Vous devez réduire la taille suivant votre espace disponible.
   
• Si vous utilisez le répertoire videos, vous ne devez changer que le nom des images, autrement vous adaptez le chemin. La flèche pour la lecture se met automatiquement sur l'image.

Dans cet exemple, j'ai mis trois vidéos, les miniatures sous l'image sont en 60x60px par défaut, vous pouvez en mettre plus.


Fotorama 4.6.4 est disponible sur ce lien, vous n'avez aucun autre code à ajouter, avec ces quelques lignes votre galerie est fonctionnelle !!!
Simple, facile à mettre en oeuvre, cette galerie vidéo est particulièrement adaptée pour des vidéos sur votre site.
 

Important !

Ne remplacez pas cette version par une version téléchargée sur le site de Fotorama, des modifications ont été faites notamment dans les feuilles de style CSS pour obtenir la validation W3C.


Pour toutes vos questions, demandes ou suggestions, merci de poster sur mon forum, rubrique Plugins forks astuces GuppY 6

 

Mis à jour le 14.01.2021