JSFiddle - React, Tailwind, and code Playground

HTML

<div id="video-container">
		<!-- Video -->
		<video id="video" width="640" height="365">
            <source src="http://cdn.spotxchange.com/website/matt/videos/mikethefrog.webm" type="video/webm">
		  <source src="http://cdn.spotxchange.com/website/matt/videos/mikethefrog.ogv" type="video/ogv">
		  <source src="http://cdn.spotxchange.com/website/matt/videos/mikethefrog.mp4" type="video/mp4">
		  <p>
		    Your browser doesn't support HTML5 video.
		    <a href="videos/mikethefrog.mp4">Download</a> the video instead.
		  </p>
		</video>
		<!-- Video Controls -->
		<div id="video-controls">
			<button type="button" id="play-pause" class="play">Play</button>
			<input type="range" id="seek-bar" value="0">
			<button type="button" id="mute">Mute</button>
			<input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
			<button type="button" id="full-screen">Full-Screen</button>
		</div>
	</div>

JavaScript

// Video
var video = document.getElementById("video");

// Buttons
var playButton = document.getElementById("play-pause");
var muteButton = document.getElementById("mute");
var fullScreenButton = document.getElementById("full-screen");

// Sliders
var seekBar = document.getElementById("seek-bar");
var volumeBar = document.getElementById("volume-bar");


// Event listener for the play/pause button
playButton.addEventListener("click", function() {
    if (video.paused == true) {
        // Play the video
        video.play();
        
        // Update the button text to 'Pause'
        playButton.innerHTML = "Pause";
    } else {
        // Pause the video
        video.pause();
        
        // Update the button text to 'Play'
        playButton.innerHTML = "Play";
    }
});


// Event listener for the mute button
muteButton.addEventListener("click", function() {
    if (video.muted == false) {
        // Mute the video
        video.muted = true;
        
        // Update the button text
        muteButton.innerHTML = "Unmute";
    } else {
        // Unmute the video
        video.muted = false;
        
        // Update the button text
        muteButton.innerHTML = "Mute";
    }
});


// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() 
alert("hi")
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen(); // Chrome and Safari
    }
});


// Event listener for the seek bar
seekBar.addEventListener("change", function() {
    // Calculate the new time
    var time = video.duration * (seekBar.value / 100);
    
    // Update the video time
    video.currentTime = time;
});


// Update the seek bar as the video plays
video.addEventListener("timeupdate", function() {
    // Calculate the slider value
    var value = (100 /...