Hello all,
I am new to Webflow, so bear with me! Ive read articles from @PixelGeek and @cyberdave but havent 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: //www.vidyard.com/blog/trigger-video-playback-player-visibility/, but Im having difficulty implementing it with Webflow.
Right now, Im 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:
I then added the following code snippet to the body of the Page:
var videos = new Vidyard.players[]; var playing=0; $[window].on['scroll', function[] { if[isElementInViewport[$["#video_container"]] && [playing==0]] { videos["uuid"].play[]; playing=1; } else if [!isElementInViewport[$["#video_container"]] && [playing==1]] { videos["uuid"].pause[]; playing=0; } }];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-new-york.webflow.io/
Here is my designer link: //preview.webflow.com/preview/here-is-new-york?utm_medium=preview_link&utm_source=designer&utm_content=here-is-new-york&preview=37661301708078919310bafec2dda1c9&mode=preview