Autoplay Video when Scrolled

New Member
3 0 2



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
Shopify Partner
1365 24 238


You can use IntersectionObserver to detect when that video gets into the viewport, please have a look at:

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


I've put some quick code that should help:

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:

 tips, tricks & Shopify sections
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.


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');

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