Fix browser HTML5 video controls showing up while scrolling

video-scroll-fix.js

// The problem is that if you have video controls (progress bar, full-screen button)
// they will pop up when video scrolls into viewport, leading to a distracting
// Solution: Remove controls via JS and only add them when video is hovered
<script>
(function() {
    var videos = document.querySelectorAll('video');
    var i;
    for(i = 0; i < videos.length; ++i) {
        (function (video) {
            video.removeAttribute('controls');
            video.addEventListener('mouseout', function() {
                video.removeAttribute('controls');
            });
            video.addEventListener('mouseover', function() {
                video.setAttribute('controls', '');
            });
        })(videos[i]);
    }
})();
</script>