Customizing the wp_video_shortcode output with add_filter

I am trying to add onmouseover=this.play() onmouseout=this.pause() to the default video element in Wordpress. I am using Gutenberg block editor.

By default, this is what the output from the video block looks like in HTML:

video src=https://example.com/wp-content/uploads/2021/05/sample-video.mp4/video

I want it to be like this:

video onmouseover=this.play() onmouseout=this.pause() src=https://example.com/wp-content/uploads/2021/05/sample-video.mp4/video

I want to add the onmouseover=this.play() onmouseout=this.pause() to the default video element.

I have tried the below filter but it's not working:

add_filter( 'wp_video_shortcode', function( $output ) {
    $output = str_replace( 'video', 'video onmouseover=this.play() onmouseout=this.pause()', $output );
    return $output;
} );

Am I doing something wrong? Any help would be greatly appreciated.

Thanks.

Topic block-editor request-filter shortcode functions filters Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.