fbpx

Media Playback

Control How Media will Playback in Your Grids

Learn how to use the media playback panel in this guide

Table of Contents

  • Looping, Hovering, Controls and More
  • Video Playback in Grid
  • Loop Video in Grid
  • Video Playback on Hover
  • Use Controls Inline
  • Mute Inline Video
  • Next: Using Pagination
  • Keep Layers on Playback

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.
What are your feelings
ShopiDevs-Best Shopify Developers-logo
ShopiDevs believes in high-quality coding and proper client support, and they offer the best Shopify eCommerce solutions with themes and apps. Stay connected with us to get our latest news and updates.

Apps

Themes

Resources

Get in Touch With Us

Facebook-f Twitter Youtube Linkedin-in

For business inquiries, collaboration, jointly work or want to say hi, Contact us by Email: [email protected]

Copyright ©2024 Shopidevs - Shopify Developers

🚀 Boost Sales with Product Sliders, Grid, Countdown & Collection

Get It Free
X
Scroll to Top