Creating a lightbox for several videos

[Brad Sappenfield]

I would like to set up a lightbox that loads several youtube and/or vimeo videos in one lightbox. Instead of having a grid gallery, I want to open the lightbox from a single image.

I have tried this, I can get the videos to load, but the navigation between them is broken. Can you please help?

[RavanH]

Hi Brad, to make navigation between the videos possible, you’ll need to give each link the same rel attribute. For example use rel="myvideogallery" …

But please be aware that this will bring along some unexpected behavior for some visitors. For example, when watching a video and wanting to fast-forward the user might hit the right arrow keyboard key. Instead of skipping to a next chapter or minute (or whatever) within the same video, playback will break off and the user will be presented the next video.

Also, when hovering with the mouse over the video, the right and left arrows (for browsing the gallery) will probably block interaction with the video player buttons.

If you want to place the arrows outside the lightbox frame, you’ll need to add some extra CSS to your themes stylesheet. Test this in a text widget:

<style type="text/css">
#fancybox-left:hover span,
#fancybox-left-ico {
left: -15px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -15px;
left: auto;
}
</style>

[Author]

Posts