Skip to content

Instantly share code, notes, and snippets.

@Cristy94
Created March 25, 2021 19:56
Show Gist options
  • Save Cristy94/2e94b07d333c2640d5bff668b0e7a5a9 to your computer and use it in GitHub Desktop.
Save Cristy94/2e94b07d333c2640d5bff668b0e7a5a9 to your computer and use it in GitHub Desktop.
Fix browser HTML5 video controls showing up while scrolling
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment