Auto play videos on Scroll?

I Need Help
1

Hi Folks,
Is it possible to make a video auto play on scroll?
Grateful for any suggestions.
Ciao
Cathy

2

Yes, you can with a bit of Javascript.

https://paquebo.com/upload/On_Scroll_Start.mp4

1 Like
3

Sounds good, but would you mind sharing the code with us non-coders. :smile:

4

Hey, @KBConcepts. No, of course not. I’m happy to share my limited coding skills. Here you go:

window.addEventListener('load', videoScroll);
window.addEventListener('scroll', videoScroll);

function videoScroll() {

  if ( document.querySelectorAll('video[autoplay]').length > 0) {
    var windowHeight = window.innerHeight,
        videoEl = document.querySelectorAll('video[autoplay]');

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

      var thisVideoEl = videoEl[i],
          videoHeight = thisVideoEl.clientHeight,
          videoClientRect = thisVideoEl.getBoundingClientRect().top;

      if ( videoClientRect <= ( (windowHeight) - (videoHeight*.5) ) && videoClientRect >= ( 0 - ( videoHeight*.5 ) ) ) {
        thisVideoEl.play();
      } else {
        thisVideoEl.pause();
      }

    }
  }

}
1 Like
5

Even though that does not make sense to me, I’m grateful for your willingness to share your knowledge. :smile:

6

Thanks for the code jerry, but wondered if you could tell here to put this JavaScript? It does exactly what I want, but never done this before.
Thanks again for sharing, it would be great if this could be a dialogue box option in the video panel.
Thanks again
Ciao
Cathy

7

There’s a sweet Codepen which is easy to implement. You just need to remove the red line.

1 Like
8

Thanks Jerry, figured it out with the code widget… I’ll check out the code pen to thanks for the help. I notice you are in Mauritius running a restaurant consultancy business. I run an marketing and production company www.combridgeinternational.com
And an educational consultancy
Virtualteacher.com.au
Sites are built in blocs - I work on the visual.
Just thought connecting businesses might be interesting.

If we’re ever in Mauritius we’ll look you up, if you are ever in Australia - Sydney - let’s catch up.
Ciao
Cathy

1 Like
9

Let’s say we don’t need H1, H2, then all we use is. Is that right?

<div class='video-wrap'>
  <video autoplay muted playsinline loop poster="http://">
    <source src="https://www.com/.mp4" type="video/mp4">
    <source src="https://.com/.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>