Table of Contents
Looping, Hovering, Controls and More
The Media Playback panel is second from the top in the Grid Settings tab, and allows you to configure several options to do with how videos in your grids behave:
Let’s take a look at each one of these options and what you can do with them.
Video Playback in Grid
By default, a video will only display a thumbnail image in the grid, for example:
It will need to be opened in a lightbox in order to play:
However, if you set Video Playback in Grid to Enable, it can playback directly inline within the grid:
A video played back in the grid will look something like this:
Loop Video in Grid
Setting Loop Video in Grid to Enable allows a video to continually repeat:
This option only effects videos that are playing in a grid, and hence is only relevant if you also have Video Playback in Grid set to Enable.
Note that looped videos will be muted so that browsers will allow them to autoplay.
Video Playback on Hover
If the Video Playback on Hover option is set to Enable, when a visitor hovers their mouse over a video it will trigger playback:
Note this only applies to videos that play back in the grid, not to videos set to open in a lightbox.
Use Controls Inline
Setting Use Controls Inline to Enable gives videos buttons like play and pause directly in the grid:
The controls that are displayed will depend on the type of video used. For example, YouTube will use its own type of controls, Vimeo will use its type of controls and so on:
This option is only relevant if videos are set to playback in the grid.
Additionally, if you have Video Playback in Grid to Enable, and have Video Playback on Hover set to Disable, I should almost certainly have inline controls so visitors have a clear way to play the video.
Mute Inline Video
Set Mute Inline Video to Enable so that when inline videos are played they’ll be silent:
To give visitors an option to unmute the video, be sure to also enable inline controls.
Keep Layers on Playback
The Keep Layers on Playback option is available in case you find the skin you’re using has layers that end up overlapping your media:
Next: Using Pagination
Next up in the manual we’ll learn how to use pagination controls to split your grids up into a collection of numbered pages.