FitVids has a web component now

Created on November 12, 2023 at 11:09 am

🎉 Last week DATE 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 PERSON . It works like this now:

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

It’s an awesome standalone that you can use with a script tag and some HTML. Zero CARDINAL 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 DATE ?

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

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

/* CSS Replacement for FitVids */ iframe [ src *= "youtube" ], iframe [ src *= "vimeo" ] { width : 100% PERCENT ; max-width : 100% PERCENT ; height : auto ; aspect-ratio : 16 CARDINAL / 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 PRODUCT to make that happen…

const sources = ‘ iframe[src*="youtube"], iframe[src*="vimeo"] ‘ document . querySelectorAll ( sources ). forEach (( video ) => { video . style . aspectRatio = ` ${ video . getAttribute PERSON ( ‘ width ‘ )} / ${ video . getAttribute PERSON ( ‘ 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 CARDINAL small, non-obvious superpower ✨ the web component has over the vanilla DOM ORG 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.


DOM ORG management, more wins.

Connecting to Connected... Page load complete