final player

by Marc Chehab

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
aüourngaüur<br />
<div id="M7lc1UVf-VE" class="vc_containers">
  <div id="M7lc1UVf-VE_player" class="vc_players"></div>
  <div id="M7lc1UVf-VE_rest" class="vc_restdivs">
    <div id="timer" style="width:50px;height:50px;background-color:green;" onclick="gettime()">GetTime</div>
    <div id="controls" style="width:50px;height:50px;background-color:blue;" onclick="gettime()">Controls On/Off</div>
    <div id="output"></div>
    <div id="output2"></div>

    <!-- CONTROLS -->
    <div id="M7lc1UVf-VE_buttons" class="buttonpanels">
      <div id="M7lc1UVf-VE_closebutton" class="buttons smallbuttons closebuttons"><span class="material-icons">close</span></div>
      <div id="M7lc1UVf-VE_replaybutton" class="buttons smallbuttons replaybuttons"><span class="material-icons">replay_10</span></div>
      <div id="M7lc1UVf-VE_volumebutton" class="buttons smallbuttons volumebuttons"><span class="material-icons">volume_up</span>
        <div id="M7lc1UVf-VE_volumelevel" class="volumelevel"></div>
      </div>
      <div id="M7lc1UVf-VE_ playpausebutton" class="buttons playpausebuttons"><span class="material-icons">play_arrow</span></div>
      <div id="M7lc1UVf-VE_csyncbutton" class="buttons smallbuttons csyncbuttons"><span class="material-icons">sync</span></div>
      <div id="M7lc1UVf-VE_newcommentbutton" class="buttons smallbuttons newcommentbuttons"><span class="material-icons">comment</span></div>
     <input id="M7lc1UVf-VE_timeline" type="range" value="0">
    </div>
  </div>
  <div id="M7lc1UVf-VE_open" class="vc_openbuttons">Video Comments</div>
</div>

aüourngaüur<br />
aüeoinhraüeinhr<br />
üaenrhüoanhr<br />
üaerinhpeaoin<br />
aüourngaüur<br />
aüeoinhraüeinhr<br />
üaenrhüoanhr<br />
üaerinhpeaoin<br />

CSS

//just temporary
body {
  margin: 0;
}
.vc_restdivs {
  height: 380px;
}

.vc_containers {
  max-width: 600px;
}

.vc_players {
  display: block;
  margin:0;
}

.vc_openbuttons {
  height: 50px;
  width: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  background-color: #cc181e;
  margin: auto;
  opacity: 0.5;
  padding: 10px 10px 10px;
  text-align: center;
  box-sizing: border-box;
  font: normal 12px/1 Arial Black, Gadget, sans-serif;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
}

.vc_restdivs {
  background-color: #AAAAAA;
  position:relative;
}

#M7lc1UVf-VE_timeline {
  position: relative;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: -1;
}

.buttonpanels {
  position: absolute; 
  bottom: 5px;
  width: 100%;
  text-align: center;
  -webkit-user-select: none;
}

.buttonpanels .buttons {
  display: inline-block;
  margin: 0 5px;
}

.playpausebuttons {
  position: relative;
  width: 16vw;
  height: 16vw;
  border-radius: 10vw;
  background-color: #d8d8d8;
  cursor: pointer;
}

.playpausebuttons span {
  font-size: 10vw;
  margin: 3vw;
}

.smallbuttons {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #d8d8d8;
  position: relative;
  cursor: pointer;
}

.csyncbuttons {
  opacity: 0.5;
}

.smallbuttons span {
  font-size: 18px;
  margin: 6px;
}

.volumelevel {
  width: 120px;
  height: 120px;
  border-radius: 60px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -60px 0 0 -60px;
  background: radial-gradient(rgba(0, 0, 0, 0) 20%, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 1));
  display: none !important;
  opacity: 0;
  z-index: 1;
}


/*generated progbar*/

input[type=range] {
  height: 16px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
  width: calc(100% - 40px);
  margin-left: 20px;
  background: transparent;
}

input[type=range]:focus {
  outline:...

JavaScript

//// ########## YOUTUBE START #############
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
//		after the API code downloads.
var ytplayer, time_update_interval = 0;

function onYouTubeIframeAPIReady() {
  ytplayer = new YT.Player('M7lc1UVf-VE_player', {
    width: '64',
    height: '36',
    videoId: 'M7lc1UVf-VE',
    playerVars: {
      'rel': 0
    },
    events: {
      'onReady': initialise,
      'onStateChange': initialise
    }
  });
}
// 4. The API will call this function when the video player is ready.
function initialise() {
  updateProgressBar();
  clearInterval(time_update_interval);
  time_update_interval = setInterval(function() {
    updateProgressBar();
  }, 1000);
  $(window).resize();
  if (ytplayer.getPlayerState() == 1) {
    $('#playpause').html("pause");
  } else {
    $('#playpause').html("play_arrow");
  }
}

//// ########## DOC READY #############

$(document).ready(function() {
  //##PROGBAR##
  $('#vc_timeline').on('mouseup touchend', function(e) {
    var newTime = ytplayer.getDuration() * (e.target.value / 100);
    ytplayer.seekTo(newTime);
  });

  //##open/close
  var vc_open = "M7lc1UVf-VE";
  //openbuttons
  $('.vc_openbuttons').click(function() {
    var curopen = $(this).parent().attr("id");
    if (curopen == vc_open) { //if this open, shut it and go home
      $(".vc_restdivs").slideUp();
      $("html,body").animate({
        scrollTop: $("#" + vc_open).offset().top
      }, 200);
      vc_open = 0;
    } else {
    	$("#" + curopen + "_rest").height($(window).height() - $("#" + curopen + "_player").height()); 
      $(".vc_restdivs").slideUp();
      $("#" + curopen + "_rest").slideDown();
      $("html,body").animate({
       ...