Cover block with video: no option to set a poster

[idea--list]

Describe the bug
One can choose not just images but also videos from the media library to be shown in the cover block.

This is cool, however videos tend to be large and for some reason the cover block does not let us set a poster image like the video block does. All this leads to a black background to be shown until the video is loaded, but that can be a confusing user experience in case of larger videos.

Expected behavior
Also the Cover block needs an option to set a poster image for video like the Video block has that feature.

[donalirl]

There is a plugin that seems to have this feature https://wordpress.org/plugins/advanced-backgrounds/ but I have not tested it. It would be helpful to have this built into the Cover Block.

[VonZubinski]

Any news on this? Ran into the same problem today: Transparent header menu with white links + logo and a Video Hero Background (30MB) on a slow Wifi created an edge to edge fullscreen experience in complete white 🙈

@idea--list As a quick fix, I figured you can use a background-image on the parent div instead of the poster image.
You can also switch into "Editor-View" and paste the poster-image part into the video tag manually.

[erikjoling]

I expect poster image support to be added to the cover block anywhere in the near future. But for the time being I wrote a simple workaround.

It turns out you can set a featured image for every media upload. With the following code I inject this featured image as a poster attribute for the video-element in 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 );

https://erik.joling.me/2021/11/04/wordpress-how-to-add-a-poster-image-to-the-video-in-a-cover-block/

[strarsis]

Using the recently introduced WP_HTML_Tag_Processor for adding the poster attribute (based on @erikjoling):

// Add Poster Image to Cover block
// currently not added by Gutenberg.
// (@see https://github.com/WordPress/gutenberg/issues/18962#issuecomment-1719468483)
// (@see https://github.com/WordPress/gutenberg/issues/18962#issuecomment-960567888)
// (@see https://erik.joling.me/2021/11/04/wordpress-how-to-add-a-poster-image-to-the-video-in-a-cover-block/)
function add_poster_image_to_cover_video($output, $block)
{
    if (
        // Only `cover` blocks
        $block['blockName'] == 'core/cover'
        and
        // Only `<video>`'s
        isset($block['attrs']['backgroundType']) and $block['attrs']['backgroundType'] === 'video'
    ) {
        // Only `<video>`'s without a `poster` attribute
        $tags = new WP_HTML_Tag_Processor($output);
        if ($tags->next_tag('video') and $tags->get_attribute('poster') === null) {
            // Get the featured image of the video attachment
            $poster_image = get_the_post_thumbnail_url($block['attrs']['id']);
            if ($poster_image) {
                // Set the featured image as `poster` attribute
                $tags->set_attribute('poster', $poster_image);

                // Return the modified HTML
                return $tags->__toString();
            }
        }
    }
    // Otherwise return the original HTML, unmodified
    return $output;
}
add_filter('render_block', 'add_poster_image_to_cover_video', 10, 2);

[michael-sumner]

We have used a core/cover block with a video background.

And it has resulted in "Core Web Vitals" issues.

We will need a poster image if a video background is set for the core/cover block.

[michael-sumner]

Updating the code from @strarsis and @erikjoling so that it is cleaner:

/**
 * Adds a poster image to the `core/cover` block video background.
 *
 * @since Gutenberg 17.7 - The `core/cover` block does not yet support poster images for video backgrounds.
 *
 * @param string $block_content The block content.
 * @param array  $block         The block attributes.
 * @return string The modified block content.
 */
function add_poster_image_core_cover_block_video_background( $block_content, $block ): string {

	// Bail early if the block is not a `core/cover` block.
	if ( $block['blockName'] !== 'core/cover' ) {
		return $block_content;
	}

	// Bail early if the block does not have a `backgroundType` attribute or it is not set to `video`.
	if ( ! isset( $block['attrs']['backgroundType'] ) || $block['attrs']['backgroundType'] !== 'video' ) {
		return $block_content;
	}

	// Bail early if the poster image is not set.
	$poster_image = get_the_post_thumbnail_url( $block['attrs']['id'] );
	if ( ! $poster_image ) {
		return $block_content;
	}

	// Get the video block content.
	$tags = new WP_HTML_Tag_Processor( $block_content );
	if ( $tags->next_tag( 'video' ) && $tags->get_attribute( 'poster' ) === null ) {

		// Set the attachment post featured image in the `poster` attribute.
		$tags->set_attribute( 'poster', $poster_image );

		// Return the updated block content.
		return $tags->__toString();
	}

	return $block_content;
}
add_filter( 'render_block', 'add_poster_image_core_cover_block_video_background', 10, 2 );