JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>


<head>



<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<link rel="stylesheet" href="style.css">

</head>

<body>


<div id="video-bg">

<video class="myvideo" muted loop autoplay>
 
 <source src="https://rocld.com/g95ru" type="video/mp4"><source>
	
</video>

</div>

<div class="knopka">

  <img  src="https://svgshare.com/i/BXw.svg" alt=""/>	

</div>

</body>

</html>

CSS

#video-bg {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}


.knopka{
width: 5%;
height: 5%;
cursor: pointer;
position: absolute;
padding: 0.5%;
transform: translate(-50%, -50%);
top: 10%;
left: 92%; 
}




#video-bg > video {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto;
	height: auto; 
}

JavaScript

$(document).ready(function(){




   var controls = {
        video: $('.myvideo'),
        playpause: $('.knopka')                 
    };
                
    var video = controls.video[0];
               
    controls.playpause.click(function(){
        if (video.paused) {
            video.play();
            $(this).prepend('<img src="https://svgshare.com/i/BXw.svg"/>');   
        } else {
            video.pause();
            $(this).prened('<img src="https://svgshare.com/i/BXF.svg"/>');   
			
        }
                
        $(this).toggleClass("paused"); 
    });


});