JSFiddle - React, Tailwind, and code Playground

by Antony Joyson

HTML

video player worked

<!--            <img src='images/videoimg.jpg' class='OverlayImg_play' onclick="playPausesite()">-->
		  <!--  <video id="mvideosite" class="" controls controlsList="nodownload"  muted="" width="95%" height="100%" onclick="playPausesite()">
		   				<source src="images/final.mp4" type="video/mp4" /></video>
		   				<script>
		   					(function() {
		   							var video = document.getElementById("mvideosite");
		   							video.addEventListener( "canplay", function() {
		   							
		   							
		   					});
		   					video.load();
		   				  })();
		   				  var myVideo = document.getElementById("mvideosite");
		   				  function playPausesite() { 
		   						if (myVideo.paused) {
		   							// alert('play');
		   							myVideo.play(); 
		   							//$('.OverlayIcon_play').hide();
		   						} else {
		   							// alert('pause');
		   							myVideo.pause(); 
		   							//$('.OverlayIcon_play').show();
		   						}
		   					} 
		   					//on the video playing hide the play button
		   					$('#mvideosite').bind('play', function(e){
		   						$('.OverlayIcon_play').hide();
		                                                   $('.OverlayImg_play').hide();
		   					});
		   
		   					//on the video pausing show the play button
		   					$('#mvideosite').bind('pause', function(e){
		   						$('.OverlayIcon_play').show();
		                                                   $('.OverlayImg_play').hide();
		   					});
		   				</script> -->
				
			<!-- <img src="images/play_btn.svg" class='OverlayIcon_play' alt="" onclick="playPausesite()"> -->