WooThumbs - Adding media/video to your WooCommerce product gallery
With WooThumbs you can embed media directly into the product gallery to be played inline.
WooThumbs provides you three options to source your media -
- oEmbed based media
- Embedded HTML
- And Self-hosted videos
Let’s take a look at all three of them one-by-one.
1. oEmbed Based Media
There are a number of oEmbed-based media sites that you can use with WooThumbs. Youtube and Vimeo are the most popular ones, you can see the full list of supported oEmbed sites here. In this article, we'll be using YouTube as an example.
Firstly, copy the URL of your YouTube video.
Next, open up your media gallery. When you have selected an image, you will see 2 fields under WooThumbs Media Details; these are URL and Aspect Ratio.
In the URL field, paste the URL from YouTube. This is the main URL of the video; the same one you'd paste into your post/page editor to embed a video.
2. Embedded HTML
You can enter any normal link to the Media URL field and that URL would be embedded as an iFrame in the WooThumbs gallery. You’d want to use this feature when you have the direct link of the image, video or 360 VR image.
For example, you can add this link in the Media URL field: https://v1.pixriot.com/?spin=439272bab6/Capsules/Capsule%20Spinner%202&t=1581451197
The output will be an interactive 360 image embedded right into the WooThumbs gallery:
3. Self Hosted Video
If you do not want to use any third-party service like Youtube or Vimeo, you can choose to self-host your videos, as long as they are in the MP4 video format.
Open up your media gallery. When you have selected an image, you will see 2 fields under WooThumbs Media Details; these are Media URL and Aspect Ratio.
To upload the media, click on the Attach MP4 button.
Upload or select the MP4 video, then click on the Attach MP4 button from the window.
Next, set your aspect ratio. My images are square, so I have set this to 1:1. A lot of videos these days are 16:9, but it depends entirely on what suits your needs; the flexibility is there for you.
How to Save the Media Settings
Once you've finished with these 2 fields, just click out of them. There is no save button, the media is automatically updated when you come out of the fields.
Once you've done that, the embedded media should be available on your product page.
You can add media to as many images as you like in your product gallery. You can also add media to your additional variation images.
Things to note:
- The image you add media to will only be used as a thumbnail.
- The media will still be available in fullscreen mode.
- When viewing a media slide, the prev/next and fullscreen icons are disabled. This means it works best when you have thumbnail navigation enabled.