Stop cover block video from autoplaying

To stop the video on the cover block from auto-playing and play it on hover on the desktop and touch on mobile. Add this JS code.

Note: We need to add a class name on the cover block named “no-autoplay”.

jQuery(document).ready(function($){
	$(".no-autoplay .wp-block-cover__video-background").each(function() {
	 this.pause();
	});

	$(".no-autoplay").on('mouseenter', function() {
	    $(this).find('.wp-block-cover__video-background')[0].play();
	});

	$(".no-autoplay").on('mouseleave', function() {
	    $(this).find('.wp-block-cover__video-background')[0].pause();
	});

	$(".no-autoplay").on('mouseenter touchstart', function() {
	    $(this).find('.wp-block-cover__video-background')[0].play();
	});

	$(".no-autoplay").on('mouseleave touchend', function() {
	    $(this).find('.wp-block-cover__video-background')[0].pause();
	});
	 
	 $(window).on('load', function() {
		 $(".no-autoplay .wp-block-cover__video-background").each(function() {
			 if (!this.paused) {
				 this.pause();
			 }
		 });
	 });
});