Помогите решить. Сам JS:
<script type="text/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);
</script>
<style type="text/css">
#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%;
}
</style>
<div class="vc_row row_padding_top row_padding_bottom">
<div id="video-compare-container">
<video loop autoplay poster="images/clean1.jpg"></video>
<div id="video-clipper"><video loop autoplay poster="images/clean.jpg"></video>
</div>
</div>
</div>
<script>
ниже<div class="vc_row row_padding_top row_padding_bottom">
и все должно заработать.