added background color gradient overlay to player

css/player.css

@@ -48,6 +48,18 @@ video::-webkit-media-controls-enclosure {
   width: 100%;
   vertical-align: middle;
 }
+
+#video-container .overlay {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 2;
+    opacity: 0.7;
+    background: linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 70%);
+}
+
 #video-container #video-controls {
   position: absolute;
   left: 0;
@@ -55,6 +67,7 @@ video::-webkit-media-controls-enclosure {
   bottom: 4px;
   z-index: 2147483647;
 }
+
 #video-controls .controls {
   padding: 0;
 }

index.html

@@ -29,6 +29,7 @@
       <content>
 
         <div id="video-container">
+          <div class="overlay"></div>
           <video id="video" width="100%" height="100%">
 
             <!-- Video here -->

js/player.js

@@ -17,6 +17,7 @@ window.onload = function() {
 	var video = document.getElementById("video"),
 	videoContainer = $("#video-container"),
 	controls = $("#video-controls"),
+	overlay = $(".overlay"),
 	playButton = $("#play-pause"),
 	muteButton = $("#mute"),
 	fullScreenButton = $("#fullscreen"),
@@ -28,8 +29,9 @@ window.onload = function() {
 	timeoutId = 0;
 	videoContainer.mousemove(function() {
 		controls.fadeIn('400');
+		overlay.fadeIn('400');
 		clearTimeout(timeoutId);
-		timeoutId = window.setTimeout(function(){controls.fadeOut('100');}, 4000);
+		timeoutId = window.setTimeout(function(){controls.fadeOut('100'); overlay.fadeOut('100');}, 4000);
 	});
 
 	video.addEventListener("click", function(){
@@ -117,9 +119,11 @@ window.onload = function() {
 	});
 	videoContainer.mouseleave(function(){
 		controls.fadeOut('400');
+		overlay.fadeOut('400');
 	});
 	videoContainer.mouseenter(function(){
 		controls.fadeIn('400');
+		overlay.fadeIn('400');
 	});
 	timeDuration.text(formatTime(video.duration));
 }