Video Poster Element Not Working Properly

Hello. I noticed a small bug in Woodmart’s video player element’s extra options within WP Bakery. I’m adding poster images to my “Video Player” elements, using the “Woodmart Extras” tab while editing the video element. I added a poster image, saved, and updated the page. I noticed that the poster image does not load if the image has capital letters in it. It looks like the image file name gets transformed to be all lowercase.

For example, the image I chose is named: QuickBooks-Online-Video-Thumb.jpg
When the published page renders, there is an error in the console for a missing image with this file name: quickbooks-online-video-thumb.jpg

There must be some sanitation process that is replacing any capital letters with lowercase, causing 404 errors on theses images. I’m attaching screenshots of my process and the console error I’m receiving. If I attach an poster image with all lowercase letters in the filename, the poster image works as expected. Let me know if you can help me fix this issue. Thank you!

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following PHP code snippet to the child theme functions.php file to fix this

function woodmart_add_video_poster( $output, $obj, $attr ) {
		if ( ! empty( $attr['image_poster_switch'] ) ) {
			$image_id = $attr['poster_image'];
			$image_size = 'full';
			if ( isset( $attr['img_size'] ) ) $image_size = $attr['img_size'];
			$image = woodmart_get_image_src( $image_id, $image_size );
			$output = preg_replace_callback('/wpb_video_wrapper.*?>/',
				function ( $matches ) use( $image ) {
				   return $matches[0] . '<div class="woodmart-video-poster-wrapper"><div class="woodmart-video-poster" style="background-image:url(' . esc_url( $image ) . ')";></div><div class="button-play"></div></div>';
				}, $output );
		}
		return $output;
	}

Regards

[Author]

Posts