/    Sign up×
Community /Pin to ProfileBookmark

Video player that starts automatically when scrolling down

Copy linkTweet thisAlerts:
Jun 02.2020

Hi

In some sites, including Facebook, if there is a frame with a video player, when scrolling down the page the player starts playing automatically when it approaches the center of the screen. When scrolling further, it stops playing even before it disappears from the screen.

Does anybody know how to make such a player?

In the examples I saw there is also a Play/Pause button, so that the visitor can stop the player without scrolling it further. And in some sites there is also a switch to disable autoplay. That also would be very helpful.

to post a comment

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@HarshShahJun 03.2020 — Hello Idor777,

You can check the scrolling with jquery, and trigger play in the hight you want it :) and pause (you can restart or anything you want ....)
``<i>
</i>
let playAfterThisHeight = 200
$(document).scroll(function() {
if ($(document).scrollTop()&gt; playAfterThisHeight) {
$('.playerembed').trigger('play');

} else {
$('.playerembed').trigger('pause');
}
})<i>
</i>``


I hope it will help you!!!
Copy linkTweet thisAlerts:
@VITSUSAJun 03.2020 — This is really helpful.
Copy linkTweet thisAlerts:
@ldor777authorJun 04.2020 — Thank you. I was thinking that it should be done with JS. Although I am not good at it but it shouldn't be difficult to figure it out.
Copy linkTweet thisAlerts:
@bwclovisJun 05.2020 — Scroll listeners are heavy. Think of it this way, each time you scroll even a bit, that function will get called which can be a performance hit. There two ways around that:

a) Throttle it so its called only every x amount of times or ( and much preferably)....

b)[ Use intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

All this being said, please make sure you follow accessibility guidelines as it can be a slippery slope with this type of feature.
Copy linkTweet thisAlerts:
@chedul7587Jun 05.2020 — Have you been working at one of the highly known retail company, Lowe’s, and wished to access MyLowesLife Employee Login Portal or Lowe’s Employee Login account? If you do, then access Lowes Employee Benefits.

[](http://letgo.onl/)
Copy linkTweet thisAlerts:
@chedul7587Jun 05.2020 — http://letgo.onl/
×

Success!

Help @ldor777 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...