JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!DOCTYPE html>
<html>
<head>
<STYLE type="text/css">
#bar 
{
border: solid 1px black; 
width: 100%; 
margin-bottom: 5px
}

#position 
{
height: 15px;
color: white;
background: steelblue;

}

#mask
{
float: left;
	position: relative;
	padding: 10px;
	border: 5px solid #61625d;
	font-family: Arial, Helvetica, sans-serif;
	background: #000000;
	box-shadow: inset 0 15px 35px #535353;
}

#vcontrols
{
	position: relative;
	padding-top: 10px; 
	float: left;
	clear: both;
	width: 98.5%;

}
section {
		  display: block;
		}
	

.boldbuttons{
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; 
height: 30px; 
padding-left: 8px; 
text-decoration: none;

}


.buttonspan{
display: block;
padding: 1px 8px 1px 8px; 
}

.buttonwrapper{ 
overflow: hidden; 
width: 100%;
}





 </STYLE>

</head>
<body>

<section>
<div id="mask">
<video id="video1" ontimeupdate="progressBar()">

<source src="https://www.youtube.com/watch?v=kHSDk3Sv-FA" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

<div id="bar">
<div id="position"  >
</div>
</div>

<div id="vcontrols">

<button onclick="play()" class="boldbuttons"><span class="buttonspan">Play</span></button>
<button onclick="pause()" class="boldbuttons"><span class="buttonspan">Pause</span></button>
<button onclick="stop()" class="boldbuttons"><span class="buttonspan">Stop</span></button>
<button onclick="fast()" class="boldbuttons"><span class="buttonspan">Fast</span></button>
<button onclick="slow()" class="boldbuttons"><span class="buttonspan">Slow</span></button>

</div>

</div>
</section>


<script type="text/javascript">

function progressBar()
{
var position = document.getElementById("position");
var video=document.getElementById("video1");

var status=document.getElementById("progress");

position.style.width = (video.currentTime/video.duration * 100) + "%";

//status.innerHTML = (Math.round(video.currentTime*100)/100) + " sec";

}

function play()
{

var...