🎉  Last week I released <fit-vids> a wrapper web component to make your <iframe> video embeds a little bit more responsive, just like the old jQuery FitVids. It works like this now:

<script type="module" src="fit-vids.js"></script>

<fit-vids>
  <iframe src="https://youtube.com?v=123"></iframe>
</fit-vids>

It’s an awesome standalone that you can use with a script tag and some HTML. Zero dependencies. It’s smol and almost doesn’t need to exist.

View Demo View on GitHub

A short backstory

Why did you make this? Is FitVids still necessary in 2023?

The short answer is that Zach Leatherman nerd-sniped me. The longer answer is because I got an issue the other day from someone using the old jQuery version of FitVids… and while I want to care… you should not be using jQuery or FitVids in 2023.

Over the last decade and a half, the web platform has evolved to the point where more efficient solutions exist in the browser for free. For example, you can replace FitVids with a four lines of CSS…

/* CSS Replacement for FitVids */
iframe[src*="youtube"],
iframe[src*="vimeo"] {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

This is what I typically do but this setup only works for 16:9 videos. If you want to accept arbitrary height or width values, you’ll need a bit of JavaScript to make that happen…

const sources = 'iframe[src*="youtube"], iframe[src*="vimeo"]'

document.querySelectorAll(sources).forEach((video) => {
  video.style.aspectRatio = `
    ${video.getAttribute('width')} / ${video.getAttribute('height')}
  `
});

And that’s what this new web component does: adds the minimal styles necessary and calculates an aspect-ratio based on the HTML’s provided height and width. Bingo bango, squishy videos.

One small, non-obvious superpower ✨ the web component has over the vanilla DOM version is auto-instantiation. If you inject a wrapped video like <fit-vids><iframe ...></iframe><fit-vids>, it will set itself up on connectedCallback, without needing to manually run the aspect-ratio calculator every time you add a video to the page. Great for modals or other dynamically injected content.

Less DOM management, more wins.

Who knows, perhaps one day we’ll be able to do aspect-ratio: attr(width) / attr(height); and then this little responsive video horcrux of mine wouldn’t be necessary at all. But until that day… god bless.