Autoplay Video when Scrolled

Highlighted
New Member
3 0 2

Hello,

 

I'm using Theme Prestige and I'm trying to have the background video automatically start playing only once the user scrolls down to that section.

Any ideas?

1 Like
Highlighted
Shopify Partner
1365 24 238

Hi,

You can use IntersectionObserver to detect when that video gets into the viewport, please have a look at: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

Just play the video when this is scrolled into view by user.

 

I've put some quick code that should help: https://jsfiddle.net/pcx1zt6j/

Scroll the page to see the video.

 

Also please note that autoplay is subject to the Autoplay Policy, some browsers may not auto play your video: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

 

 

 

 

https://sections.design tips, tricks & Shopify sections
0 Likes
Highlighted
New Member
1 0 0

Hi! Please can you help me and tell me if you managed to make this work: Video play only when scrolled on. I'm only a week into coding. This is my code for loop autoplay: 

<video loop="loop" sound="" autoplay="autoplay" preload="" id="vid" style="max-width: 100%; height: auto;">
<source src="video_link"video/mp4">
Your browser does not support our video.
</video>

 

And now I want to embed this codem from Mircea_Piturca Shopify Partner, but I do not know where to put it into my code:

var options = {
rootMargin: '0px',
threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

var target = document.querySelector('video');
observer.observe(target);

function callback(entries) {
entries.forEach(function(entry) {
entry.isIntersecting ? target.play() : target.pause()
});
}

0 Likes