use YT player API to force autoplay, resolving double-tap bug

[paulirish]

hopefully fixing #6 inspired by #90

See https://github.com/paulirish/lite-youtube-embed/issues/6#issuecomment-555135068 for some context and details

Thanks @dantovein for kicking off this approach. you'll see a lot of similarities to #90.

I originally wanted to avoid loading this JS. (it's 300kb), but since the iframe JS is already 1MB, it seems fairly reasonable to add another 30%. :/ (god how i wish the typical iframe payload was smaller. alas.)

---

Seeking feedback on this approach!

Also happy for folks to test this. It seems to fix the double-tap/non-autoplay bug 95% of the time. Test pages: https://lite-youtube-embed-git-ytapi-paulirish.vercel.app/

[paulirish]

The bug that Andy Davies mentioned at #perfnow is 95% fixed by this PR but....

From https://github.com/paulirish/lite-youtube-embed/issues/6#issuecomment-1242944293 ..

Thanks for the YT API merge.

It’s now working with one click/tap on almost all browsers except ipadOS Safari (and most likely iOS, but I don’t have an iPhone to test). Tested and worked well on Firefox Desktop, Chrome Desktop, Safari Desktop and Chrome mobile.

I don't have an ipad sadly.. anyone wanna pair up with me to sort this out?

[simevidas]

https://lite-youtube-embed-git-ytapi-paulirish.vercel.app/

On iPhone, I have to tap the play button twice to play the video.

[nucliweb]

Ey @paulirish, you can test it with iOS Simulator

If you add the event onStateChange we can see the states

new YT.Player(videoPlaceholderEl, {
    width: '100%',
    videoId: this.videoId,
    playerVars: paramsObj,
    events: {
        'onReady': event => {
            event.target.playVideo();
        },
        'onStateChange': event => console.log(event) 👈
    }
});

Sreenshots