2655 visibility 0 arrow_circle_up 0 arrow_circle_down
I'm trying to get my embedded Vimeo video to pause on exiting the viewport and allow another embedded Vimeo video to play upon entering viewport.
I've been exploring various solutions and discovered Froogaloop which works perfectly, however I believe is the old Vimeo api.
I got an exact example working of the video pausing on exiting, but its using an ID rather than class so unable to use on more than one video and not entirely sure how to accomplish this.
Example - Jsfiddle
Jquery :
var iframe = document.getElementById['video']; // $f == Froogaloop var player = $f[iframe]; var inner = $[".inner"]; var elementPosTop = inner.position[].top; var viewportHeight = $[window].height[]; $[window].on['scroll', function [] { var scrollPos = $[window].scrollTop[]; var elementFromTop = elementPosTop - scrollPos; if [elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight] { inner.addClass["active"]; player.api["play"]; } else { inner.removeClass["active"]; player.api["pause"]; } }];Any help would be immensely appreciated :]
0 arrow_circle_up 0 arrow_circle_down
You need different player objects - one for each iframe. For performance reasons you should create the list of players outside of your onScroll function.
var players = [] $['.inner'].each[function[] { players.push[{ player: new Vimeo.Player[$[this].find["iframe"].get[0]], top: $[this].position[].top, status: "paused" }] }]; var viewportHeight = $[window].height[]; $[window].on['scroll', function[] { var scrollPos = $[window].scrollTop[]; for[var i=0; i 0 && elementFromTop < players[i].top + viewportHeight] ? "play" : "pause"; if[players[i].status != status] { players[i].status = status; players[i].player[status][]; console.log[i, status]; } } }];You can test here: //jsfiddle.net/oxf4dtn3/
Note: it is not possible to start any video automatically, if its sound is on. You can mute vimeo videos using the parameter "&muted=1"