Paused/finished YouTube videos automatically start playing when scrolling up far enough to load new posts

I have spent a lot of time this afternoon on this issue and I feel like this issue might not be fixable unless someone else has a brilliant idea.

The problem is in the virtual DOM with prepending (scrolling up). In this case, you are adding a bunch of elements (posts) to the beginning of an array. When the virtual DOM does its diff, it notices the element with the youtube <iframe> is not in the same place, so it removes and re-adds it later. This causes the youtube player to refresh the iframe, which causes it to play again.

It seems impossible to move an <iframe> in the DOM without reloading it.

Note that this bug doesn’t happen when scrolling down because appending posts doesn’t change the order. It also doesn’t matter if the user hasn’t started the video already, because lazyYT hasn’t inserted the iframe yet.

4 Likes