Play/Pause HTML5 videos based on visibility with beforeReveal and beforeReset

[hrvstr]

Hi, I want to play and pause HTML5 videos based on their visibility with ScrollReveal. Kind of like how Twitter and Facebook does it for GIFs (only autoplay and loop the video when visible).

I got it mostly working but only for the first video. I think this is because I am using document.getElementById and id's should be unique in valid HTML. But I can't get it to work at all with document.getElementsByClassName (no video starts playing instead of only the first).

I created a CodePen to demonstrate my issue.

How can I target only the revealed element with my function?

var vid = document.getElementById("shots");
function playVid(el) {vid.play();}
function pauseVid(el) {vid.pause();}

ScrollReveal().reveal('video', {
  beforeReveal: playVid ,
  beforeReset: pauseVid,
  reset: true
});

Environment

• Operating System: macOS 10.14.6 (18G2022)
• Browser Version: Safari 13.0.4 (14608.4.9.1.4)
• ScrollReveal Version: v4.0.6

[jlmakes]

How can I target only the revealed element with my function?

Each callback is passed the revealed element as el

function playVid(el) { el.play(); }
function pauseVid(el) { el.pause(); }