When using the HTML5 video element in the WordPress Block Editor, the first frame of the video will usually be used as the poster (preview) image, unless autoplay is set to true. WordPress allows you to manually add a poster image, but creating this image can be unnecessarily time-consuming.
This plugin adds a setting to the video block, which allows a frame from the video at a specific time code to be selected as the poster image. The frontend code uses JavaScript to fetch the metadata from the video file, and create a WebP image on the fly, which is then added to the video player. No image is saved to the server, so no caching problems occur.
This plugin adds a custom control to the WordPress core/video block, allowing you to choose a specific frame within the selected video which will be used as the poster image. This is especially useful for automatically generating a thumbnail from a specific point in the video, without needing to manually create and upload a separate image.
The control in the editor will only appear if the selected video in the block is an MP4 file. If autoplay is set, then no poster image will be set, because poster images don't appear if a video starts automatically.
The frame at the specified time code will be used as the video's poster image on the frontend of the website if the video file does not have a manually-selected poster image.
The image is generated on the fly in the visitor's browser and therefore doesn't need an additional server request. No image is saved to the server, so this solution will continue to work if the page or post is cached.
- Download or clone this repository into your WordPress
wp-content/pluginsdirectory. - Make sure the folder is named
shp-automatic-poster. - In your WordPress admin, go to Plugins and activate Automatic video poster image.
- Edit or create a post or page, add a Video block, and use the new time code control in the block sidebar to select the frame for the poster image.
Install the NPM packages to support the JavaScript build process by running npm install. Start the build watcher by running npm start.
To run PHPStan tests on the code, run composer install and then composer run phpstan . in the root folder of the plugin.
This plugin is developed and maintained by Say Hello GmbH. No guarantee is provided.