I am striving to develop a video comparison slider that fills the height and width of the viewport, inspired by the techniques discussed in this informative article:
Article
Despite my efforts, I have not been successful in achieving this effect so far and need guidance on how to make it work. Any assistance would be greatly appreciated. You can find the link to the JSFiddle example and code below:
HTML:
<div id="video-compare-container">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/dirty.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-dirty.webm>
</video>
<div id="video-clipper">
<video loop autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/clean.jpg">
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.mp4>
<source src=https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/floodplain-clean.webm>
</video>
</div>
</div>
CSS
body {
background: #333;
margin:0;
}
#video-compare-container {
display: inline-block;
line-height: 0;
position: relative;
width: 100%;
padding-top: 42.3%;
}
#video-compare-container > video {
width: 100%;
position: absolute;
top: 0; height: 100%;
}
#video-clipper {
width: 50%; position: absolute;
top: 0; bottom: 0;
overflow: hidden;
}
#video-clipper video {
width: 200%;
postion: absolute;
height: 100%;
}
Javascript:
function trackLocation(e) {
var rect = videoContainer.getBoundingClientRect(),
position = ((e.pageX - rect.left) / videoContainer.offsetWidth)*100;
if (position <= 100) {
videoClipper.style.width = position+"%";
clippedVideo.style.width = ((100/position)*100)+"%";
clippedVideo.style.zIndex = 3;
}
}
var videoContainer = document.getElementById("video-compare-container"),
videoClipper = document.getElementById("video-clipper"),
clippedVideo = videoClipper.getElementsByTagName("video")[0];
videoContainer.addEventListener( "mousemove", trackLocation, false);
videoContainer.addEventListener("touchstart",trackLocation,false);
videoContainer.addEventListener("touchmove",trackLocation,false);