Could we get a more noob friendly guide for Pro-usage? 😇

[Erlendms]

I've got the basic usage working fine over here (so css and js loads correctly in my site), but as I'm working on reducing the load times on my site, I wanted to see if I could implement the "progressive enhancement" variant.

First I just tried to paste the HTML for that version on my site. Then I added "async" to the script loading.

But I still have the same issue: The a href to the external YouTube links covers the entire embed, and clicking anywhere takes me to the video on youtube.com.

On the demo site, the link dissapears when the script is loaded, but not on my end. Doing display: none manually on the link fixes things, so the embed is there. I've also removed every piece of css from my site, and also double checked that lite-youtube's js and css is up to date...

So, what I'm asking for, for myself and probably others, is a bit more detailed guidance on getting from the "basic usage" to "progressive enhancement".

People like me, who has the js and css working with the basic snippet: Exactly what do we have to do to get the other snippet to work? 🤓

Edit:
Another reason I’m asking, is that I’ve made a couple of Shortcuts I was planning on sharing here - that takes a YouTube link as an input, and formats it to a lite-youtube-snippet that it adds to your clipboard.

And then I thought I should have it working with the Pro-usage as well!

Here’s a version for Pro-usage, that needs a YouTube API for title and thumbnail, that gives a snippet I think is working. (See above for why I can’t test it properly 😛)

And here’s a simpler version, that gives a basic snippet (without title, so doesn’t need API).