JSFiddle - React, Tailwind, and code Playground

by Harish K

HTML

<!DOCTYPE html>
<html lang="en" >
   <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.min.css'>
  
  </head>
   <body translate="no" >
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <div class="row">
         <div class="col-md-3 text-center">
            <hr>
            <h3>Cut This Video</h3>
            <div class="panel panel-info" style="margin-top:30px;">
               <div class="panel-heading">
                  <h3 class="panel-title">Current Time</h3>
               </div>
               <div class="panel-body">
                  <div id="curTime" style="font-size:20px;">
                  </div>
               </div>
            </div>
            <div class="panel panel-info">
               <div class="panel-heading">
                  <h3 class="panel-title">Select Quality</h3>
               </div>
               <div class="panel-body">
                  <div class="dropdown" id="dropdown" style="font-size:20px;">
                     <!-- dropdown here -->
                  </div>
               </div>
            </div>
            <div class="panel panel-info">
               <div class="panel-heading">
                  <h3 class="panel-title">Cutted duration</h3>
               </div>
               <div class="panel-body">
                  <div id="finalDuration" style="font-size:20px;">
                  </div>
               </div>
            </div>
         </div>
         <!-- player -->
         <div class="col-md-6 text-center" style="padding-top:30px;">
            <div class="embed-responsive embed-responsive-16by9">
               <!-- 1. The <iframe> (and video player) will replace this <div> tag....

CSS

.size
     {
     font-size: 80px;
     font-weight: bold;
     }
     .sizePar
     {
     font-size: 21px;
     }
     .input-size
     {
     width: 355px;
     float: left;
     }
     .button-size
     {
     width: 95px;
     float: none;
     height: 33px;
     }
     .padding
     {
     padding-top: 11px;
     }
     .video-image-size
     {
     width:250px;
     height:auto;
     }
     .center
     {
     text-align: center;
     padding-top: 25px;
     }
     .button-rule
     {
     font-style: normal;
     font-weight: bold;
     vertical-align: middle;
     }
     .button-widht
     {
     width: 116px;
     }
     .allontana
     {
     margin-bottom: 30px;
     margin-top:50px;
     margin-right:15px;
     }
     .separa{
     margin-left: 10px;
     margin-right: 10px;
     }
     .bordered{
     border: 1px solid black;
     }
     body { 
     padding-top: 70px;
     }
     .carousel-inner img{
     margin: 0 auto;
     }
     .navbar-brand{
     font-size: 20pt;
     font-style: bold;
     }
     hr { 
     display: block; 
     height: 1px;
     border: 0; 
     border-top: 1px solid orange;
     margin: 1em 0; padding: 0; 
     }
     .progress {
     border-radius: 0px; 
     height: 10px;
     }
     .progress-bar-warning{
     background: #ffffff;
     }
     .video-image-size-onWatch{
     width:150px;
     height:auto;
     }
     #showcase {
     margin: 0 20px;
     text-align: center;
     }
     #range .noUi-base {
     }
     #range .noUi-background {
     }
     #range .noUi-connect {
     background: #80C9F5;
     box-shadow: inset 0 0 5px rgba(20,20,20,0.65);
     }
     #value-span,
     #value-input {
     width: 50%;
     float: left;
     display: block;
     text-align: center;
     margin: 0;
     }

JavaScript

var tag = document.createElement('script');
     
     tag.src = "https://www.youtube.com/iframe_api";
     var firstScriptTag = document.getElementsByTagName('script')[0];
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
     
     var player;
     var duration;
     function onYouTubeIframeAPIReady() {
       player = new YT.Player('player', {
         height: '360',
         width: '640',
         videoId: 'IP1kr0SCYzk',
         playerVars: { 'start': 0, 'autoplay': 0, 'controls': 0 },
         events: {
           'onReady': onPlayerReady,
           'onStateChange': onytplayerStateChange } });
     
     
     }
     
     function onPlayerReady(event) {
       // event.target.playVideo();
     
       duration = player.getDuration();
       setMoreInfo();
       playPauseVideo();
       setIONrangeSlider();
       checkDomainAndStop();
     }
     
     function onytplayerStateChange(newState) {
       setCorrectImageOnPlay();
     }
     
     /*
      IONrangeSlider
      */
     var fromOld = 0;
     var toOld = duration;
     var slider;
     function setIONrangeSlider() {
     
       var slider = document.getElementById('range');
     
       noUiSlider.create(slider, {
         start: [0, duration], // Handle start position
         step: 1, // Slider moves in increments of '1'
         margin: 3, // Handles must be more than '3' apart
         connect: true, // Display a colored bar between the handles
         behaviour: 'tap-drag', // Move handle on tap, bar is draggable
         range: { // Slider can select '0' to 'duration'
           'min': 0,
           'max': duration } });
     
     
     
       var valueInput = document.getElementById('value-input'),
       valueSpan = document.getElementById('value-span');
       var readValue;
       // When the slider value changes, update the input and span
       slider.noUiSlider.on('update', function (values, handle) {
         if (handle) {
           readValue = values[handle]...