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: https://www.vidyard.com/blog/trigger-video-playback-player-visibility/, 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”
id='vidyard_embed_code_uuid'
src='https://player.vimeo.com/api/player.js'>
$(window).on('scroll', function() {
if ((isElementInViewport($("#video_container")) && (playing==0)) {
// Play video
// Set playing flag to true
}
});
</script>
<iframe
style="position: absolute; top: 0; left: 0;"
src="https://player.vimeo.com/video/403398425"
width="100%" height="100%"
frameborder="0"
allow="fullscreen"
allowfullscreen>
</iframe>
</div>
I then added the following code snippet to the body of the Page:
<script src="https://player.vimeo.com/api/player.js"></script>
<script type="text/javascript">
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;
}
});
</script>
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: https://here-is-new-york.webflow.io/
Here is my designer link: https://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