I’ve been a big fan of the WordPress Media & Text block since it first showed up in Gutenberg.
It’s a versatile block that makes a very common design pattern extremely easy to implement in the WordPress block editor.
Recently, I had a project that made use of the Media & Text block for the hero of a website. It worked great.
Then there was a new requirement to use video. “No big deal”, I thought. The block supports video as well as images.
But to my dismay I quickly realized the same controls available to autoplay, look, and mute the Video block aren’t available in the Media & Text block.
We had already done some custom styling to the Media & Text block and this was a project on a tight budget. No room to throw away work so we had to improvise.
Parsing and Re-writing Block Content
Luckily I had done a good deal of digging into how WordPress parses dynamic block attributes and in that research I dug into the render_block hook. So I knew we could potentially rewrite the <video> element markup to add in the needed attributes.
As a quick primer, there are a few attributes needed on a <video> element to make autoplay work across browsers. autoplay is needed to autoplay the video, loop is needed to loop it, muted is needed because no one (including browsers) like a video to just start blaring sound, and finally playsinline is needed to play it inline on iOS.
That’s not a 100% guarantee your video will autoplay across the board though. And use it sparingly. You shouldn’t autoplay a large video on someone’s mobile data plan.
Caveats aside the implementation is fairly straightforward. We just need to find the video element inside the Media & Text block and add our attributes to the markup that is output. For example, if the markup looks like <video src="media.mp4"> we want to make it <video autoplay loop muted playsinline src="media.mp4">.
function custom_autoplay_block( $block_content, $block ) {
if ( $block['blockName'] === 'core/media-text' ) {
$block_content = str_replace( '<video', '<video autoplay loop muted playsline', $block_content );
}
return $block_content;
}
add_filter( 'render_block', 'custom_autoplay_block', 10, 2 );The render_block filter passes two parameters: $block_content which is the markup we want to edit and $block which all the data about the block. Namely it includes the name of the block so we can only make changes to the core/media-text block.
To do that we check if $block['blockName'] is core/media-text so then we run our str_replace function that looks for the part of the string <video and replaces it with <video autoplay loop muted playsline. I include the opening < to make sure we get the video element and not any text that’s just “video”.
Then we return our $block_content and we’re done. Now anytime a video is used in a Media & Text block it will autoplay and loop.
Of course this method has its limitations. Namely this applies to every instance of the Media & Text block and takes no regard to user’s decisions in the editor.
To address that you could give the block a custom CSS class in the block’s advanced settings then check for that class with $block[‘attrs’][‘className’]. Then perform the str_replace if the class you want exists.
Wrapping Up
Using the render_block hook allows you great control over rewriting the markup output by blocks in WordPress. It can be powerful but should be used with discretion and it could easily break with updates to block markup or functionality.
If you need to make a video autoplay on a tight budget it works great.
