Youtube Responsive Embed

by Marc Chehab

HTML

<div class="box">

<h1>Threat level</h1>
<div id="area">
<div id="slider">
  <div id="position"></div><div id="thumb"></div>
</div></div>
</div>

<div id="bgmusicplayer"></div>
<div id="output">
</div>

CSS

.box {
  max-width:600px;
}
h1 {
  text-align:center;
  margin:0px;
}

#player{
    width:;
    height:100%;
    margin:0px;
    overflow:hidden;
    display:none;
}

/* SLIDER */

div#area {padding:20px;}
div#area, div#area * { user-select: none; 
  transition-duration: 300ms;}

div#slider {
  width:100%;
  width:100%;
  margin: 10px 0px;
  height:3px;
  background-color:#D4D4D4;
  cursor: pointer;
}
.dragging #slider {
  height:5px;
  margin:9px 0px;
}
.dragging #thumb {
  opacity:1;
  height:10px;
  width:10px;
}

div#position {
  background-color:#FF0808;
  float:left;
  height:100%;
  max-width:100%;
}

div#thumb {
  position:relative;
  float:left;
  margin:-3px -5px;
  opacity:0;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background: #FF0808;
  box-shadow:0px 0px 1px rgba(0,0,0,0.5);
}

JavaScript

var threatlevel = 0;

function updatebgmusic() {
	threatlevel = $("#position").width()/$("#slider").width();
  $("#output").html(threatlevel);
}

$(document).ready(function() {
    var dragging = null;

    $("#area").on("mousemove", function(e) {
        if (dragging) {
            $("#position").width(e.pageX-$("#position").position().left);
            updatebgmusic();
        }
    });
    
    $("#area").on("mousedown", function () {
        dragging = 1;
    });
    
    $("#slider").on("click", function (e) {
        $("#position").width(e.pageX-$("#position").position().left);
            updatebgmusic();
    });
    
    $(document.body).on("mouseup", function (e) {
        dragging = null;
    });
    
    $("#area").on("mouseover", function () {
    	$("#area").addClass("dragging");
    })
    $("#area").on("mouseleave", function () {	$("#area").removeClass("dragging"); dragging=null;
    }); 
});

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 bgmusicplayer;

function onYouTubeIframeAPIReady() {
  bgmusicplayer = new YT.Player('bgmusicplayer', {
    playerVars: {

      enablejsapi: 1,
      disablekb: 1,
      showinfo: 0,
      controls: 0,
      fs: 0,

    },
    height: '100%',
    width: '100%',
    videoId: '54yIMKjG048',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

function onPlayerReady(event) {
  //event.target.playVideo();
}

function onPlayerStateChange(event) {
  
}

function stopVideo() {
  bgmusicplayer.stopVideo();
}