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.
OK our debugging shows that for some reason the Youtube embedded player did fix the autoplay thing, so I am fixing the title here.
The bug we have is that we have “protection” in place when you click play that tells the “post cloaker”, hi … don’t cloak me. But this protection is somehow binned when you scroll up.
This means that if you play a song on youtube and scroll up it will just stop playing when we load the next chunk.
Sorry to resurrect this, but I’ve noticed this starts happening now even when scrolling down. Not sure if something changed this bug recently to the worse, or if it’s a different bug altogether. Confirmed with several people in our instance. This makes video sharing threads quite unbearable, when the earlier videos start suddenly playing.
