Video poster image

A poster 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 poster image is set in the Studio, it will also be used as the media thumbnail inside the Spott app.

You can set up a poster 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 poster 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 publish settings

When in the Studio, clicking on the publish tab:

Step 3: Set image

1. From Media Gallery
   • Select "Change image" and select an existing image from the Media Gallery or upload a new poster image.
2. Use current 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.
     
     
     
     Press "Use current video frame". Spott will then grab a screenshot and use that as its poster image.
     
     
     

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.