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

Shopify Discussion
,

Topic summary

Main issue: Show a preview image before a video plays on a Shopify page.

Key points:

  • The current
  • Recommendation: Use an image file for poster and consider uploading both the video and image to Shopify’s Files for better performance and reliability, instead of external hosting.

Follow-up update:

  • After switching, the preview image and the video display at different sizes.
  • Guidance: Ensure both the media assets and the HTML/CSS element dimensions match so the poster and the video share the same sizing/aspect ratio.

Status: Partially addressed. The correct approach (poster must be an image) is identified, with additional advice to host assets on Shopify and align sizes. No confirmation of final resolution yet.

Summarized with AI on January 1. AI used: gpt-5.
1

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
Limage.jpg1515Ă—671 74.5 KB

Here is the code

2

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 :slightly_smiling_face: Here’s a link for uploading content to save you a google.

Best of Luck!

3

the image and video come out 2 different sizes

1 Like
4

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