Zenphoto manages some types of multimedia files (image, video, music, ...) hosted on its own webspace, but is not natively designed to manage online videos (eg videos hosted on YouTube).

But in fact, there is a way since Zenphoto 1.2.6 to add online videos in the gallery (see here for all details):

  • In admin panel, activate the class-textobject plugin
  • In an album in your gallery, download a text file (.txt, .htm or .html) containing embedded code to your video
  • Optionally use a different thumbnail than the default one by following these instructions


I made some adaptations on the theme zpBootstrap to manage these videos in the gallery (on GitHub, use the master version). In particular, the display of videos is responsive, and videos hosted on YouTube and Vimeo can be played directly from FancyBox.

However, to combine the requirements of Bootstrap and FancyBox, the html code describing the embedded video must have the following structure:

  • 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>

Indeed, Zenphoto does not know the format of the embedded video whereas Boostrap needs it to correctly manage its display. Each file for video must therefore describe the correct format of the video, with one of the 2 css classes provided by Bootstrap:

  • class="embed-responsive-16by9" for 16/9 videos
  • class="embed-responsive-4by3" for 4/3 videos


Here is the result with a Vimeo video:

  • Display of the thumbnail of the video in an album of the gallery (opening of the video in FancyBox):
vimeo

vimeo

  • Responsive display of the video somewhere on the site (news, page, ...):