Player/css/player.css

* { margin:0; padding:0; }


div#player {
	 -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	background-color: #333;
	height: 30px;
	position: absolute;
	top: 0px;
	width: 100%;
	color: white;
	padding-left: 20px;
	line-height: 30px;
	letter-spacing: 5px;
	cursor: default;
	box-sizing: border-box;
}

div#player div#player-control {
	float: left;
	margin-right: 5px;
}

div#player a#player-menu,
div#player div#player-volume {
	float: right;
	margin-left: 10px; 
}

div#player div {
	display: inline-block;
	vertical-align: top;
}

div#player div#player-bar {
	position: relative;
	height: 5px;
	width: 500px;
	margin-top: 12px;
	border: 1px solid #AAA;
	cursor: pointer;
}

div#player div#player-cursor {
	position: absolute;
	height: 15px;
	width: 2px;
	top: 2px;
	transform: translate(0px, -50%);
	transition: left 1s;
	background-color: #FFF;
}

div#player div#player-played {
	position: absolute;
	height: 5px;
	top: 0px;
	left: 0px;
	transition: width 1s;
	background-color: #DDD;
}

div#player div#player-buffer {
	position: absolute;
	height: 5px;
	top: 0px;
	left: 0px;
	transition: width 1s;
	background-color: #888;
}

div#player span#player-title {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: nowrap;
}

span#player-duration,
span#player-currentTime {
	font-size: 0.8em;
}

div#player #player-volume-bar {
	position: relative;
	height: 5px;
	width: 100px;
	margin-top: 12px;
	border: 1px solid #AAA;
	cursor: pointer;
}

div#player div#player-volume-set {
	position: absolute;
	height: 5px;
	width: 100%;
	top: 0px;
	left: 0px;
	background-color: #DDD;
}

div#player a:hover {
	text-shadow: 0px 0px 5px #fff;
	cursor: pointer;
}

#YTplayer {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  height: 10px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #fff;
  height: 10px;
  width: 2px;
  background: #ffffff;
  cursor: pointer;
  margin-top: -2px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 10px;
  width: 2px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #fff;
  height: 10px;
  width: 2px;
  background: #fff;
  cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #fff;
  border: 0.2px solid #010101;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #fff;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}