WordPress allows content managers to embed videos directly on a website via the Block Editor by uploading a file to the media library in the WordPress admin and then placing the video on the page. This gives users full control over their content without having to resort to a third-party video service.
If you visit YouTube or Vimeo, you will see that the preview is usually curated – a suitable image is usually selected that hints at the content of the video. The video block in the WordPress Block Editor allows content managers to upload their own image file and assign it as a “poster” (or preview image). However, this image must be created and assigned separately.
This additional creation of a separate image had been on my list of minor problems to solve for some time. Thanks to the extensibility of the WordPress Block Editor, I was able to build my own addition to the standard functions. Instead of developing a completely new block, I used hooks and filters to add a custom block attribute and a custom interface to manage the thumbnail directly. A perfect little project for a quiet Friday.
In my solution shown below, the uploaded video is empty in the first frame – exactly where the preview is normally generated. (The video fades in from white.) This is useless because the user does not see a preview. In the second example, I used my solution to select a frame at 21 seconds to show what the video is about in an aesthetically pleasing image. This new setting saves me having to open an image editing programme and create the preview manually.
