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

[Ecomowner]

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.

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>

[SymmetryMike]

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!

[Ecomowner]

the image and video come out 2 different sizes

[SymmetryMike · Accepted solution]

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