JSFiddle - React, Tailwind, and code Playground

by nukeboy212

HTML

<html lang="en"><head><script></script>
                <script>

</script>
        

<script data-ad-client="ca-pub-5384985538338676" async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<link rel="icon" href="logo999.png"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script><link rel="stylesheet" type="text/css" href="style.css"></head>






<!--<title>Kevin is gay and thinks websites with titles are more secure</title>-->

 
 
  
  


 
  


<body style=" color: white;background-color: #f6f6f6; background-color: white !important;">
<div style="position: fixed; display: block; background-color: white;">
    
    <!-- h5 style = "color: red;">Temp Msg: Logging in after signing up or into a loggin into a current account might take two times for it to work. Discord: https://discord.gg/dSpFje</h5 -->
    
    <!-- Trigger/Open The Modal -->




</div>
<!-- style>
/* The Modal (background) */
.modal {
  display: inline-block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000000; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0);...

CSS

#video{
    width: 100%;
}
.video-container{
margin: 0 auto;
    width: 68%;
    position: relative;

}

.controls{
   

    position: absolute;
    bottom: 0%;
    width: 100%;
    
    
    height: 100%;

}

.buttons{

    background: none;
    border-style: none;
    outline: none;
    
}

#play{
    cursor: pointer;
    display: inline-block;
    color: white !important;
   margin-left: 50%;
    margin-top: 25%;
    font-size: 80px;

}

#pause{
 position: absolute;
    color: white !important;
   margin-left: 50%;
    margin-top: 25%;
    font-size: 80px;
}

.bar{
     position: absolute;
    bottom: 0;
    height: 1%;
    cursor: pointer;
   transition-duration: .1s;
    background: rgba(0,0,0,.6);
    width: 100%;
    
}
.invbar{
background-color: transparent !important;
     position: absolute;
    bottom: 0;
    height: 4%;
    cursor: pointer;
    width: 100%;
    
}
.thebar2{
    
    width: 0px;
    
      background-color: rgba(0,0,0,.4) !important;
    height: 100%;
    
    
}

.thebar{
    
    width: 0px;
    
      background-color: rgba(0,0,0,.4) !important;
    height: 100%;
    
    
}

.bar:hover{
     position: absolute;
    bottom: 0;
    height: 2% !important;
    
    
}


.invbar:hover + .bar{
        position: absolute;
    bottom: 0;
    height: 2% !important;
}

#annoyingblackthing{
        position: absolute;
    bottom: 0%;
    width: 100%;
    
    
    height: 100%;
background: rgba(0,0,0,.5);
}

/* */
.thebar[type='range'] {
  -webkit-appearance: none;
  background-color: white;
  height: 100%;
  overflow: hidden;
  width: 100%;
    cursor: pointer;
}

.thebar[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 20px;
    background-color: transparent;
    width: 100%;
        
}

.thebar[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;

      background-color: transparent;
  border-radius: 0;
  box-shadow: -600px 0 0 600px limegreen;
  cursor: pointer;
  height: 100%;
  width:...

JavaScript

var wait = false;
var paused = 1;
    $("#pause").show();
    $("#play").show();

$("#annoyingblackthing").show();

/*$("#controls").click(function(){
   
    
 

    
     $("#video").get(0).play();
    $("#pause").show();
    $("#play").hide();
    $("#annoyingblackthing").hide();
    $("#pause").addClass('pause');
    
   paused = 0;
})*/
$("#controls").click(function(){
    if (paused == 0){
        paused = 1;
       
   $("#video").get(0).pause();
    $("#pause").hide();
    $("#play").show();

        $("#annoyingblackthing").slideDown(200);
      $("#pause").removeClass('pause');
    }
    else{
        
     $("#video").get(0).play();
    
    $("#play").hide();
    $("#annoyingblackthing").slideUp(200);
    $("#pause").addClass('pause');
    
   paused = 0;
    }

})

$("#play").click(function(){
    
})
var wait = 0;
var video = document.querySelector("video");

var bar = document.querySelector(".thebar")
var bar2 = document.querySelector(".thebar2")




bar.addEventListener("change", whereTo, false);


function whereTo(){
     $("#video").get(0).pause();
     paused = 1;
  
        $("#annoyingblackthing").slideDown(200);
    var seekTo = video.duration * (bar.value / 100);
video.currentTime = seekTo;
    wait = seekTo;
    
    var whereYouAt = video.currentTime;
    var minutes = Math.floor(whereYouAt / 60);   
    var seconds = Math.floor(whereYouAt - minutes * 60)
    var x = minutes < 10 ? "0" + minutes : minutes;
    var y = seconds < 10 ? "0" + seconds : seconds;
    $("#currenttime").text(x + ":" + y);
     
}
bar.addEventListener("input", function(){
   

      $("#video").get(0).pause();
     paused = 1;
  

    $("#annoyingblackthing").slideDown(200);
    var seekTo = video.duration * (bar.value / 100);
video.currentTime = seekTo;
    var whereYouAt = video.currentTime;
    var minutes = Math.floor(whereYouAt / 60);   
    var seconds = Math.floor(whereYouAt - minutes * 60)
    var x = minutes < 10 ? "0" + minutes : minutes;
    var y =...