Add a Play Control Overlaying an MP4 video

Hello,

Thank You so much for your Concerns. We are well. Hope you are doing well as well. Stay Safe.

1. Use the following CSS Code:

.html5-video-trigger {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64px;
	height: 64px;
	line-height: 64px;
	color: #333;
	font-size: 24px;
	text-align: center;
	border-radius: 50%;
	z-index: 2;
	background-color: #FFF;
	-ms-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
}

.html5-video-trigger i {
	display: none;
}

.html5-video-trigger:not(.video-playing) i.icon-line-play,
.html5-video-trigger.video-playing i.icon-line-pause {
	display: block;
}

.html5-video-trigger i.icon-line-play {
	position: relative;
	left: 3px;
}

Complete instructions about using Custom CSS Codes can be found in the Documentation > Start > Customization Section.

1. Use this HTML Code:

	
		
		
	
	[
		
		
	](#)

1. Use the following JS Code at the bottom of the Page:

	jQuery('.html5-video-trigger').on( 'click', function(){
		let trigger	= $(this),
			video	= trigger.parent().find('video');

		if( trigger.hasClass( 'video-playing' ) ) {
			video.get(0).pause();
			trigger.removeClass('video-playing');
		} else {
			video.get(0).play();
			trigger.addClass('video-playing');
		}

		return false;
	});

This should definitely work fine. Hope this Helps!

Any further customization or feature/functionality enhancements is your responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .

Let us know if we can help you with anything else or if you find any further issues.