I have a HTML5 video banner at the top of my page. It has the autoplay and loop attributes added. When I begin to scroll down the page the video stops and never restarts when I scroll back upwards. I'd like the video to carry on playing no matter if the user scrolls or not.

There doesn't seem to be any attributes listed in the W3C spec that suggests a solution, so is there another way of disabling this functionality?

The HTML and CSS is very simple so I'm wondering if I need some JS to help along the way:

HTML:

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

CSS:

video {
  width: 100%;
  height: auto;
}

Any help would be much appreciated.

I have a HTML5 video banner at the top of my page. It has the autoplay and loop attributes added. When I begin to scroll down the page the video stops and never restarts when I scroll back upwards. I'd like the video to carry on playing no matter if the user scrolls or not.

There doesn't seem to be any attributes listed in the W3C spec that suggests a solution, so is there another way of disabling this functionality?

The HTML and CSS is very simple so I'm wondering if I need some JS to help along the way:

HTML:

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

CSS:

video {
  width: 100%;
  height: auto;
}

Any help would be much appreciated.

• javascript
• jquery
• css
• html
• video

4 Answers 4

You can use isInViewport jQuery plugin as below:

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

it works fine for me,, if you want to change yiur viewport then change fraction = 0.5; in my code

var videos = document.getElementsByTagName("video"),
fraction = 0.5;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);

div {padding-top:300px; width:320px;}

video {
   
    padding-bottom:300px;    
   
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<video id="video1" preload="auto"  loop="loop">
  <source src="http://www.w3schools./html/movie.mp4" type="video/mp4">>
  bgvideo
</video>
    


</div>

This can be disabled by using the attribute data-keepplaying.

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

if using fullpage.js

<video autoplay muted loop data-keepplaying>
   <source src="myvide.mp4" type="video/mp4">
</video>

works