Video preview image

A preview image in Spott has the main purpose to act as the first loading image before the video is played. By default, this is the first frame of the video, which in most cases is black or white. And fully black when lazy loading is enabled.

 

When a preview image is set in the Studio, it will also be used as the media thumbnail inside the Spott CMS.

 

You can set up a preview image either by uploading the image directly to Spott or by selecting a timestamp in the video to serve as the image. You'll need to enable it in your embeds. Find the step by step instructions below.

 

Adding a preview image

Step 1: Open the Spott Studio

Make sure you already have a video ready where you want to set the preview image and go to the Studio. If you haven't learned how to do this, check out this guide that explains the very first steps the get you started.

 

Step 2: Open the media settings

When in the Studio, clicking on the media name opens a dropdown menu. Now click "Edit" to open the media settings.

Step 3a: Upload an image

If you have your own image that you want to use, you can upload it in this modal,

 

Click "Save" to continue.

 

Step 3b (alternative): Use current video frame

If you just want to use a frame that appears in the video, you can move your timeline to the correct frame that you want to set as the preview image.

 

Return to the edit media modal and click "Use current video frame". Spott will then grab a screenshot and use that as its preview image.

 

Click "Save" to continue.

 

Step 4: Embed with your preview image

When you've done step 3, you can now embed your video with the preview image by clicking "Publish" in the Studio and make sure to set the Poster image setting to "Preview image" in the settings.

 

If you don't yet see the result, make sure to turn off autoplay.

 

Alternatively, if you've already embedded your video, you can change the already existing embed code by tweaking a few lines. Change the poster-frame-type parameter to CUSTOM_IMAGE.

  • For Javascript: data-poster-frame-type="CUSTOM_IMAGE"

  • For iFrame: posterFrameType=CUSTOM_IMAGE.

 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.