Solved

How can I display a preview image before a video plays?

Ecomowner
Excursionist
30 3 2

in the below image I have a video that does show an images of the item, the video plays but I want a picture of the item to show before you play the video. Anyone know how to fix the code to show an image before someone clicks on the video. Limage.jpg

 

Here is the code

<div style="max-width: 100%; text-align: center;">
<video poster="https://video.aliexpress-media.com/play/u/ae_sg_item/2214247502705/p/1/e/6/t/10301/1100151854610.mp4..." controls="controls" width="100%" style="max-width: 100%; height: auto; object-fit: contain;" muted="" playsinline>
<source type="video/mp4" src="https://video.aliexpress-media.com/play/u/ae_sg_item/2214247502705/p/1/e/6/t/10301/1100151854610.mp4..."></video>
</div>

Accepted Solution (1)
SymmetryMike
Shopify Partner
30 6 3

This is an accepted solution.

Yup, you'll want to ensure the assets as well as the elements are sized the same.

Mike Kiss

@ symmetrycommerce.com we build integrations, websites and Shopify solutions.

View solution in original post

Replies 3 (3)

SymmetryMike
Shopify Partner
30 6 3

Hey There,

 

I think you want to to change your poster to an image not a video in your video tag. 

 

poster=someImage.png

 

Also it would be helpful if you could download the video and images and upload into Shopify. Then use those files from Shopify instead of an external source like video.aliexpress... It'll help your site performance 🙂 Here's a link for uploading content to save you a google.

 

Best of Luck!

Mike Kiss

@ symmetrycommerce.com we build integrations, websites and Shopify solutions.

Ecomowner
Excursionist
30 3 2

the image and video come out 2 different sizes

SymmetryMike
Shopify Partner
30 6 3

This is an accepted solution.

Yup, you'll want to ensure the assets as well as the elements are sized the same.

Mike Kiss

@ symmetrycommerce.com we build integrations, websites and Shopify solutions.