Delay YouTube autoplay until the video is in view

Design help Animations & Interactions
1

Hi!

I was wondering how you can delay the autoplay of a YouTube video until the videoplayer is actually in view? Now it plays (muted) on page load, which means that by the time the visitor has scrolled down, the video is already 50% underway.

I tried it with a slide-in animation on scroll but that does not appear to be the way. I also tried Googling it, but unfortunately no luck this time.

Here is my public share link: LINK
(how to access public share link)

2

as a very quick of the bat comment, what happens if you hide it and display when in view?

3

Hey @LouisMSP, I’ve just had a very quick Google and found these two links which may be of use to you -

And here is YouTube’s official docs on the YouTube embed and all the parameters it accepts - Parametry odtwarzacza  |  YouTube IFrame Player API  |  Google Developers

4

Since April 2018, Google made some changes to the Youtube Autoplay Policy. You not only need to add the autoplay=1 as a query param, but also add allow=‘autoplay’ as an iframe’s attribute

So you will have to do something like this:

<iframe src="https://www.youtube.com/embed/VIDEO_ID?autoplay=1" allow='autoplay'></iframe>