Commit a457f854 authored by Jonas Heinrich's avatar Jonas Heinrich

added background color gradient overlay to player

parent 7592d889
......@@ -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;
}
......
......@@ -29,6 +29,7 @@
<content>
<div id="video-container">
<div class="overlay"></div>
<video id="video" width="100%" height="100%">
<!-- Video here -->
......
......@@ -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));
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment