Streaming live at 10am (PST)

Trigger Video Playback on Player Visibility

Hello all,

I am new to Webflow, so bear with me! I’ve read articles from @PixelGeek and @cyberdave but haven’t found a working solution to my challenge.

I am setting up a page with multiple videos. I would like them to automatically play when they are visible in the viewport and then pause when they are not (when the user scrolls down, for example). I found this article, which does exactly what I want:, but I’m having difficulty implementing it with Webflow.

Right now, I’m using iframes nested in a div for my video. I added this code snippet to my HTML embed to determine if it was in the viewport and if the video was playing:

<div id=”video_container”>
<script type=”text/javascript”

    $(window).on('scroll', function() {
        if ((isElementInViewport($("#video_container")) && (playing==0)) { 
              // Play video
              // Set playing flag to true
		style="position: absolute; top: 0; left: 0;"
    width="100%" height="100%" 

I then added the following code snippet to the body of the Page:

<script src=""></script>
<script type="text/javascript">
  var videos = new Vidyard.players();
  var playing=0;
  $(window).on('scroll', function() {
    if(isElementInViewport($("#video_container")) && (playing==0)) {
    } else if (!isElementInViewport($("#video_container")) && (playing==1)) {

But nothing seems to change on the page. The video does not autoplay when in the viewport as desired. Would love any suggestions!

Here is my public share link:
Here is my designer link: