Performance Optimized Video Embeds with Zero JavaScript – Now on Frontend Masters

I’m excited to share that my first guest post on Frontend Masters just went live.

It’s about a pattern I’ve been using for a while to lazy-load embedded videos—YouTube, Vimeo, or any iframe-based player—using only <details>, <summary>, and CSS—no JavaScript. No dependencies. No web components. Just stuff the browser has supported for years.

What it’s about

Regular video embeds are quietly expensive. As soon as the page loads, they start loading resources, even if no one ever plays.

Tools like Paul Irish’s lite-youtube-embed already improve this by deferring the player load, but they still rely on JavaScript.

With <details>, we can get the same behavior natively:

• The video only loads when the user clicks and opens the details block.
• That means lazy loading based on intent, not scroll position.
• It also works above the fold, where traditional lazy loading makes your Largest Contentful Paint worse instead of better.

I ran some tests comparing this approach to lite-youtube-embed:

So you get:

• Less JavaScript
• Fewer bytes over the wire
• Faster first paint

All without adding another library to your stack.

Why this is on Frontend Masters

Frontend Masters has been one of my go-to sources for learning and staying up to date with the front-end world for years.

Back in 2024, Chris Coyier wrote about how heavy YouTube embeds are on their blog. My post picks up that thread and shows a way to solve the same problem without any JavaScript.

Getting to publish this on their platform is special for me. I’ve learned a lot from Frontend Masters over the years, so being able to contribute something back there feels great.

Part of hTWOo

This pattern is also available as a ready-to-use component in hTWOo, my open-source design system for Microsoft 365 and SharePoint built entirely in HTML and CSS. It ships with video components for both YouTube and Vimeo out of the box.

If you’re working in the Microsoft 365 or SharePoint space and want to use this pattern without building it from scratch, hTWOo has you covered.

Read the full post

If you want to see the full pattern, the markup, the CSS, and some interactive demos, you can read the article here:

👉 Performance-Optimized Video Embeds with Zero JavaScript