Mix It Up

This responive thumbnail grid uses a custom script to open a lightbox slider which plays video using the PLYR Video plugin.
The grid can hold up to 48 thumbnail images which open a mixture of HTML5 MP4 video, Vimeo and YouTube video and images on click or tap.
The widget creates a CSS Grid layout so the number of items per row for each device type can be set and the grid padding and gap adjusted.
Thumbnail Images & Captions
The thumbnail images should all be cropped to the same size and aspect ratio and have a file width of no more than 400px before importing into EverWeb.
The thumbnail captions use the same font as the description in the lightbox and have their own controls for font size, color and the background color and its opacity. The captions can appear on hover when viewed on computers if required.
Lightbox
When a lighbox with a video is opened it will autoplay and pause when the lightbox is closed or the visitor navigates to the next slide.
There is an option to include a title/caption and a description of the media. in the lightbox. This is not really optional since they need to be present and include descriptive keywords for the search engines.
SEO
When inserting media files into a web page it is really important to be aware that the search engines cannot index these files unless they have a text description in the same container as the video or image.
The EW Video Mix Gallery inserts the thumbnail images in an HTML5 <figure> element with a caption in the <figcaption> tag.
As mention previously the lightbox can have a title and description. These should be used to inform both the visitors and the search engines about the video or image content.