Video cover images (thumbnails)

A video's thumbnail, also called a cover or poster image, is the still picture visitors see before the video plays. In WordPress you set it on the Video block under Poster image. On a Dirigible site, every video you upload also gets a thumbnail automatically, which the Dirigible video backgrounds use.

Why set a thumbnail?

Without one, the browser decides what to show before the video plays. That can be a black or blank box until the video loads, or whatever the first frame happens to be. A thumbnail you choose:

• shows straight away, before any of the video downloads
• gives visitors a reason to press play
• stands in for background videos on phones that don't play them

Add a thumbnail to a Video block

This works on any WordPress site.

1. Edit the page and select the Video block.
2. In the block sidebar, find Poster image and click Set poster image.
3. Upload an image or choose one from the media library.
4. Click Save.

To change it later, click Replace under Poster image. To go back to no thumbnail, click Remove.

Use an image with the same shape as the video (usually 16:9, such as 1920 × 1080), so it doesn't jump when the video starts. See Best image size and format for your website.

How Dirigible makes covers for you

On a Dirigible site, every video you upload gets a thumbnail automatically: Dirigible grabs a still frame and saves it as the video's cover image (also called a poster image). It sits in the media library like any other image. The cover shows while the video loads, and on phones that don't play background video.

Hero, Section, Grid video cards, and Animated Slider slides don't have a separate poster image field. They use the cover saved with the video.

The automatic cover isn't added to core Video blocks. To use it there, follow the steps above and pick the cover from the media library: it's a JPG named after the video.

What happens when you upload a video?

1. Upload a video from the block editor or Media → Add Media File.
2. Give it a moment after the upload finishes.
3. Open the video in the media library. The cover shows as its featured image.

The still comes from the first tenth of a second of the clip and is saved as a JPG named after the video.

How do I replace a video's cover image?

1. Open the video in Media → Library or in a media window.
2. Find the Cover field.
3. Click Generate Cover, or Regenerate Cover to replace the current one.

Regenerating deletes the old cover for that video. Other images aren't touched.

You can't pick which frame is used. If the opening frame is black or blurry, trim the clip so it opens on a clear shot and upload it again.

Where the cover shows

• Section, Hero, and Grid video backgrounds show the cover while the video loads, and in place of the video on small screens.
• Animated Slider slides with a BG Video show the cover while the video loads.

After a theme update, older videos without a cover get one the next time you're logged in to the dashboard. A notice shows progress until they're done.

If the cover doesn't appear

• "This browser cannot decode this video." Dirigible makes the cover in your browser, so the browser has to be able to play the file. Try Generate Cover in another browser, or convert the video to an MP4 and upload that.
• "Timed out loading the video." Large files can take too long to load. Try again on a faster connection, or upload a smaller, compressed version.
• The cover is a black frame. The clip fades in from black. Trim the start and upload it again, or set a different Poster image on a Video block.
• The old thumbnail still shows on the live site. See Fix WordPress changes not showing on your site.

Tips

• Upload MP4s that open on a clear, well-lit frame.
• The cover is a normal image. You can use it elsewhere, and set a focal point on it if it shows up in cropping layouts.
• Give the cover image alt text if it carries meaning, for example a product shot.