Skip to main content

Custom Thumbnail Poster

Show an image over your video before playing

Updated over 2 months ago

Overview

This is the image (or video clip) that shows on your video player before the viewer presses play. It can be used to entice a the viewer to click play and/or give the viewer a preview of what's to come in the video.

By default, we will generate a thumbnail for your video from an image but you can customize this.
​
This feature can be access when editing an individual video. Browse to the Player tab >> Thumbnail.

You have 2 choices here, which are to use an image or a video.

If a video thumbnail is used please note that we don't use a .gif image to simulate a video. We use an actual video clip which loads faster and performs better than a .gif image.

Thumbnail as an Image

Image will be selected by default. To change the default image you can either add the URL of an image that is already online, upload an image file (or choose from your image history), or use an image from part of your video.

Image Recommendations

Supported image types: PNG and JPG. We do NOT support GIF. If you were looking to use a GIF, please instead use our VIDEO thumbnail option as this will give you a higher quality thumbnail.

In most cases your video has a 16:9 ratio so we recommend an image that has a 16:9 aspect ratio as well so it fits nicely with your video. We would recommend 1280 X 720 image to optimize for loading, but 1920 X 1080 can also be used. If possible, optimize/compress the size of your files for best performance.

If you decide to use an image that is small or 1:1 ratio (square image), we will attempt to keep the image as is (instead of stretching it out) and set it against a black background.

We also recommend that you do NOT use an image with a transparent background.

To add a URL to an image already online, simply remove the URL of your default image and replace it with your own:

To upload a new file, or use one that you've already uploaded in the past, simply click the corresponding button:

Finally, you can choose a part of the video to use as your thumbnail. Click on Create new and then choose the part of the video you want to use in hours, mins, secs.

In this example I am using the frame from the 6 second mark in the video. The preview will change on the right side:

Then click the Apply Thumbnail button once you are happy with the frame you are previewing and it will apply it here:

When you done, just click the SAVE button and the thumbnail will be saved to your video.

Thumbnail as a Video

To use a video poster, select video from the top. By default, we will use a portion of your video from :00 to :05 to make the default poster.

Similar to the image option, you can either add the URL of a video that is already online, upload a video file, or use a portion of your video.

In this example I will choose Create new and then start from the 6 second mark. Then click on Generate Video Poster. This will use a clip from second 6 to 11 for my video thumbnail.

You can also choose whether to play on hover or auto-play:

Play on hover will only play the video thumbnail when the viewer hovers their mouse over the video. Auto-play will have the video thumbnail start as soon as the video player loads.

Once you are finished click on SAVE to save your settings.

Issues/Problems

If you just added a new thumbnail and it's not appearing on your watch page or your embeds the issue is very likely that your browser is still using the cached version of the thumbnail.

You can first try to do a hard refresh on your browser which is a command to your browser to ignore its cached version of a webpage and download the latest version from the server. Here's how to do that:

Chrome, Firefox, or Edge for Windows

Press Ctrl+F5 (If that doesn't work, try Shift+F5 or Ctrl+Shift+R)

Chrome or Firefox for Mac

Press Shift+Command+R

Safari for Mac

There is no simple keyboard shortcut to force a hard refresh. Instead, press Command+Option+E to empty the cache, then hold down Shift and click the refresh icon in the toolbar.

If that doesn't work please manually clear your browser cache. Here's how to do that:

Chrome

  1. At the top right, click three dot menu icon, then Delete browsing data.

  2. Choose a time range, like Last hour or All time.

  3. Select the types of information you want to remove.

  4. Click Delete data.

    1. If you delete cookies while signed in to Chrome, you won't be signed out of your Google Account.

Firefox

  1. Click the 3 line icon for the menu then select Settings.

  2. Select Privacy & Security panel

  3. In the Cookies and Site Data section, click on Clear Data.

  4. Check off the box for Temporary cached files and pages and then click on the Clear button.

Edge

  1. Click the three dots (Settings and more) in the upper-right corner of the browser window.

  2. Select Settings and then Privacy, search, and services.

  3. Under "Clear browsing data", click Choose what to clear.

  4. Check the boxes next to Cached images and files and any other data you wish to delete (e.g., Cookies and other site data).

  5. Click Clear now to remove the selected data.

Safari

  1. Click on Safari menu, then Settings.

  2. Click on Privacy tab

  3. Click on Manage Website Data

  4. Click the Remove All button

Once your browser cache is cleared, reload the watch page or your webpage with the embedded videos.

If the problem persists after that please contact the helpdesk.

Did this answer your question?