A Custom shortcode example for your Video Background

add_shortcode('video-bg', function($attr){
	$shortcode_atts = shortcode_atts( array(
		'url' => '/wp-content/uploads/Welcome-to-Paia-Inn-1080p.mp4',
		'poster' => '/wp-content/uploads/hero-image-1.jpg',
		'logo' => '/wp-content/uploads/Paia-Inn-Logo-Alternate.png',
		'title'	=> 'Where Surf & Sand Meet Sophistication Maui, Hawaii',
		'book_now_url'	=> 'https://paiainn.client.innroad.com/',
	), $atts );
	$html = '<div class="ld-video_wapper">
		

<div id="video_background_img" class="video_background" style="background-image:url('.$shortcode_atts['poster'].');"></div><!-- The video -->
<video autoplay="" muted="" id="myVideo">
  <source src="'.$shortcode_atts['url'].'" type="video/mp4">
</video>
<div class="video-itro-section"  onclick="playPause()">
			<div class="video-itro-section-inner">
				<img width="1424" height="1261" src="'.$shortcode_atts['logo'].'" class="attachment-full size-full" alt="" style="max-width: 350px;">								
				<h2 class="elementor-heading-title elementor-size-default">'.$shortcode_atts['title'].'</h2>
				<div class="elementor-button-wrapper">
			<a href="'.$shortcode_atts['book_now_url'].'" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="readmore-button">
						<span class="elementor-button-content-wrapper">
						<span class="elementor-button-text">Book Now</span>
		</span>
					</a>
		</div>
			</div>
		</div>
		
<div class="video_overlay"></div>
<div id="video_instructio">Click to play/pause video</div>
</div>
<style>
	.ld-video_wapper{
		position: relative;
		min-height: 100%;
		min-width: 100%;
		width: 100%;
    	height: 100vh;
		    cursor: pointer;
}
	/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
}


.video_background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top left;
    /* min-width: 100%; */
    /* min-height: 100%; */
    /* z-index: 9999999999; */
}

.video_overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: top left;
    background-color: #00000042;
}


.video-itro-section {
    z-index: 9999;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
}

.video-itro-section-inner {
    min-width: 0;
    min-height: 0;
    margin: auto;
    display: inline;
    text-align: center;
    max-width: 767px;
}

.video-itro-section-inner h2 {
    font-family: "Lato", Sans-serif;
    font-size: 35px;
    font-weight: 700;
    text-transform: uppercase;
    font-style: normal;
    text-decoration: none;
    color: #fff;
}

#video_instructio {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #afdbd6;
    font-weight: bold;
    display: none;
}

.ld-video_wapper:hover #video_instructio {
    display: block;
}

@media(max-width: 768px){
	.hide-on-mobile{
		display: none;
	}
}


	</style><script>
var video = document.getElementById("myVideo");
video.muted = false;
console.log(video);
video.onended = function() {
  video.style.display = "none";
  document.getElementById("video_background_img").display = "block";
  document.getElementById("video_instructio").style.display = "none";
};
function playPause() { 
  if (video.paused) 
    video.play(); 
  else 
    video.pause(); 
} 
</script>';

return $html;
	
});