Optimizing YouTube embeds

UpdatedSeptember 17, 2021

•2 min read•View as Markdown

Thomas Portelange

A Web Developer based in Belgium, specialized in PHP & JS development

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

A git diff with all changed and new unstaged files

I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Jul 27, 20261 min read

A git diff with all changed and new unstaged files

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

Mar 6, 20265 min read

Writing a Zero-Dependency CSV and XLSX Reader/Writer

Media Queries Level 5 are awesome

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

Oct 10, 20253 min read

Modern tooltips

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Dec 20, 20241 min read

Using Dialog elements today

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

Oct 29, 20243 min read

LeKoala Dev Blog

47 posts

Lazy loading the iframe

loading="lazy" is slowly becoming a possible solution to avoid loading the iframe if it's not displayed. I'm not sure why it's not added by default in the embed markup, but I see no reason not to do it.

<iframe width="560" height="315" loading="lazy" src="https://www.youtube.com/embed/ogfYd705cRs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>

Loading less scripts

Digging deeper, I found this article about lazy load embedded YouTube videos. It shows a really neat solution where you use the srcdoc doc property of the iframe in order to replace the video player with a thumbnail and a link.

This solution is really nice because it doesn't require any additional tooling, you simply have to write a bit more of html.

Sounds perfect? Almost. It has one slight issue: on mobile, you need to tap twice to play the video. When reading the comments, I learned about another possible solution...

lite-youtube custom element

I love custom elements! They are such a clean, self-contained piece of feature. If only they were the default way of using javascript.

What does this custom element provides?

Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.

Sounds like a deal. But maybe you don't want to/cannot add easily these files to your project. Or you simply want to test it. This is why I created a really simple service (hosted on Vercel) that is powered by this custom element. Simply replace your regular YouTube embed by this.

<div class="iframe-container"> <iframe src="https://lite-youtube-embed-iframe.vercel.app/embed/ogfYd705cRs?controls=0" loading="lazy"></iframe> </div>

I'm not sure if it's really better than the solution from css-tricks, but using this custom element has some nice side effects, like using youtube-nocookies by default. I just wanted to experiment to see if this could be a viable solution.

So what do you think? Is this better than adding the custom element to your project?

Command Palette

Comments

More from this blog

Lazy loading the iframe

Loading less scripts

lite-youtube custom element