Customize thumbnails and posters

Set or update FastPix video thumbnails to improve visual previews, manage media representation, and improve on the viewing experience.

The thumbnail image is the first thing viewers see before they decide to click and watch your video. Customizing the thumbnail or poster image for your videos is essential for maximizing viewer engagement and creating an inviting first impression. A custom thumbnail can enhance the visual appeal, communicate the content’s essence, and reinforce branding.

Default thumbnail image

FastPix Player automatically generates a preview thumbnail from the midpoint of your video, using the provided playback-id. This serves as the default thumbnail image, ensuring that viewers have a snapshot of the video before playback.

URL format:

https://images.fastpix.com/{playback-id}/thumbnail.jpg 

This behavior provides an automatic way to showcase your video’s content and grab viewer attention.

Change thumbnail image

You can customize the default thumbnail by using the following methods:

1. Using thumbnail-time attribute

Specify the precise time in the video from which you want the thumbnail to be generated. This attribute is useful for highlighting a specific frame that best represents your video.

In this example below, the thumbnail image is generated from the 30th second of the video.

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  thumbnail-time="30" 
4
></fastpix-player> 

2. Using the poster attribute

You can set a custom image URL as the thumbnail by using the poster attribute. This offers flexibility to choose an image that may not be from the video but aligns with your brand or visually represents the video’s theme.

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  poster="https://example.com/custom-poster.jpg" 
4
></fastpix-player> 

3. Removing the thumbnail image

If you prefer not to display any thumbnail, set the poster attribute value to an empty string (""). This can create a minimalist design or help focus attention directly on the video content.

Example:

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  poster="" 
4
></fastpix-player> 

PLEASE NOTE

Ensure that the absence of a thumbnail image aligns with your overall design and user experience goals. Also, if the poster attribute is not set, FastPix Player will generate a thumbnail using the Playback ID by default

Best practices for poster images

• Maintain aspect ratio: Use images that match the aspect ratio of your video to prevent distortion.
• High resolution: Ensure the image is high quality to maintain clarity across different devices and screen sizes.
• Relevance: Choose images that accurately reflect the content and entice viewers to watch.

Set placeholder while video loads

Default placeholder

The default poster image is used as the placeholder while the video loads, maintaining a consistent visual experience.

Adding custom placeholder

Use the placeholder attribute to set a custom image as a placeholder during the video’s loading phase. This is useful for branding or conveying information before playback starts.

For example:

1
<fastpix-player 
2
 playback-id=`{Playback_id}` 
3
 thumbnail-time="30" 
4
 placeholder="https://example.com/custom-placeholder.jpg"  
5
></fastpix-player> 

Using a data URI for the placeholder image embeds it directly into the HTML, optimizing loading times and reducing additional HTTP requests.

Some best practices for placeholders

• Ensure the placeholder image is easily recognizable and informative.
• Reinforce brand identity by using branded images or logos.
• Compress the image to reduce loading times without compromising quality.