Some improvements ideas.

[janoamaral]

I've working on a similar implementation. Here is a couple of ideas.

• Used the a tag <a href="https://youtu.be/3vBwRfQbXkg" class="ytlight">HOW TO FUNK IN TWO MINUTES</a>. If the user has JavaScript disabled, it can go to the video anyway.
• Lazy load the thumbnail.
• The quality of the thumbnail to load is decided with NetworkInformation.effectiveType.

POC

Test page lite-youtube-embed
Test page ytlight

[simevidas]

Isn’t adding an <a> element the responsibility of the website that uses the component, not the component itself?

[paulirish]

• since the first release, we've featured the Progressive Enhancement style usage: https://github.com/paulirish/lite-youtube-embed/#pro-usage-load-w-js-deferred-aka-progressive-enhancement. So yeah.. same deal.
• lazy loading is covered in Lazy load cover image #57
• I just added support for loading a better quality thumbnail in Upgrade poster image to higher resolution webp if possible #167 . i wouldn't trust effectiveType with much, personally. But.. the motivation is a good one. :)