JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

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 controls>
 
 <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>

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"); 
    });


});