Sometimes you want to share a Youtube video on your website, instead of just pasting a link. The problem with this is that Youtube will load over 1.5 MB of scripts (including tracking code), styles, and HTML even if the user is not interested in the video at all.
This is the default embed code that is proposed by Youtube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/evezbNPC0Mo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
There is a pretty nice workaround to provide a visually pleasing video for your user without making the site slow and heavy. You can use the thumbnail from Youtube and link it to the video, so the user would click an image and go to Youtube to watch the video.
<a href="https://www.youtube.com/watch?v=evezbNPC0Mo" target="_blank"> <img src="images/thumbnail.jpg" alt="Town Hall #77 - How platformOS cloning revolutionized web development"> </a>
Now there is a better way: Lite YouTube Embed
Lite YouTube Embed is a script that registers a custom element in the browser. This element shows a Youtube player that's very similar to original, but:
- It is not downloading anything but the thumbnail until the user clicks play
- It uses the
youtube-nocookie.comdomain instead of
youtube.com, which strips out tracking cookies, preserving your users' privacy
- According to the readme, because of deferred loading of resources, it renders 224x faster than the original player
- It replaces static thumbnail with original Youtube player after user decided he is interested in watching the video
The custom element is straightforward to use:
<lite-youtube videoid="evezbNPC0Mo"> </lite-youtube>
See live demos.