Guides
Login

Setting preview thumbnail

Suggest Edits

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. Here’s how to manage and customize thumbnails in FastPix Player.


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.app/{playback-id}/thumbnail.jpg

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


Changing the thumbnail image

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.


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.

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
></fp-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.

<fp-player 
  playback-id="{Playback_id}" 
  poster="https://example.com/custom-poster.jpg" 
></fp-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: 

<fp-player 
  playback-id="{Playback_id}" 
  poster="" 
></fp-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: 

<fp-player 
 playback-id=`{Playback_id}` 
 thumbnail-time="30" 
 placeholder="https://example.com/custom-placeholder.jpg"  
></fp-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.

Updated 2 days ago