Thumbnail: Show a video play button

This is an alternate method of showing videos on your product pages. This version allows you to show a video play icon with your product image thumbnails.

Result:

Since Pipeline 2.4, you've had the ability to add videos in your product image slides. That technique overlays a play icon onto an existing product image. 

When using that original method, only the main product image will show the play icon and not the thumbnail.

Original method example:

If you would rather have a thumbnail that shows a video play icon, you can use the following alternate approach:

1

Upload a video play image to your product page

Download the following image to your computer:

https://cdn.shopify.com/s/files/1/2018/8867/files/play-button.png

2

Add video play image to your products

Add that image to all products that will have a video:

https://shopify.com/admin/products

Choose Add Images:

After choosing the file from your computer, the video play icon will appear as an image:

3

Add video link to the image

Hover over the video play image and choose the ALT tag option, click that:

Add the URL of your video:

Valid:

 https://www.youtube.com/watch?v=EeuICRNMqRg

https://vimeo.com/99275308

Invalid:

https://youtu.be/EeuICRNMqRg

https://www.youtube.com/watch?v=EeuICRNMqRg&feature=youtu.be&t=33s

Be careful of YouTube's various URL formats. The short or longer versions will not work with the player.

Valid example:

Complete by pressing the Done button.

4

Hide video play overlay icon

This step is required to hide the overlay icon that the theme uses for the standard method of showing videos on product images.

When using this alternate method, the video play overlay icon will be hidden from all product pages. For that reason, repeat Step 2 for all products that will have videos. This will keep all your product pages consistent and make it easier for customers to find your product videos. 

The following code removes this overlay icon:

Note:
Modifying the theme code will make it difficult to update your theme. Use this code at your own risk. Groupthought does not provide any warranty or further support for this code. The code provided is only a suggestion. Please work with a developer or  Shopify Expert to ensure proper customization. This code may not work with all versions of of Pipeline or with other code customizations and apps you may have installed. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.

Code:

/* -- code to hide video play icon on product pages -- */
.template-product .icon-play svg{display:none;}
/* - end - */

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Resulting in a clean product image slide:

When the customer clicks on the main video play image, your video will play in a modal window: