Currently there is no straightforward way to add a poster image to a video in the cover block. This is mentioned in this Gutenberg issue on GitHub. I managed to build a simple workaround by using the available features.
A tiny secret: the built-in poster feature for media
After you upload a video file to your WordPress website, browse to the media library through your main menu. Here you select your video and edit other details (or something like that). You then arrive on the edit screen of the video attachment.
When you edit your video attachment you can upload a featured image. This image somehow magically becomes the poster image for your video. Unfortunately this “magic” isn’t ported to the video in our cover block.
Using the featured image as a poster attribute in the cover block
Using the render_block
filter (link) you can edit the generated output for the frontend of your WordPress website.
I wrote this code to add the poster image to the video-element for cover blocks:
// Add Poster Image to Cover block
function add_poster_image_to_cover_video( $output, $block ) {
if (
// Only cover blocks
$block['blockName'] == 'core/cover' &&
// Only video's
isset($block['attrs']['backgroundType']) && $block['attrs']['backgroundType'] == 'video' &&
// Only video's without a poster attribute
strpos( $output, 'poster=' ) === false
) {
// Get the featured image of the video attachment
$poster_image = get_the_post_thumbnail_url($block['attrs']['id']);
if ($poster_image) {
$output = preg_replace('/(<video\b[^><]*)>/i', '$1 poster="'.$poster_image.'">', $output);
}
}
return $output;
}
// Hook up
add_filter( 'render_block', 'add_poster_image_to_cover_video', 10, 2 );
This isn’t the most userfriendly method, but I assume the cover block video will have the poster image supported in the near future. And this solution is just fine for the time being.