Make Youtube/Vimeo Videos Fluid and Responsive With The fit-vids Web Component

Preview:

Description:

fit-vids is the web component version of the FitVids, which is a jQuery plugin for fluid width video embeds

The web component supports stretching and resizing YouTube and Vimeo videos to fit their parent container when you wrap them in the provided custom element. This makes it easy to create a responsive video that scales beautifully across desktop, tablet, and mobile screens.

How to use it:

1. Import the fit-vids.js library as a module.

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

2. Add the ‘fluid-vids’ custom element around your YouTube or Vimeo embed code. The script will then dynamically resize your video player to stretch or squish to the width of its parent container as the screen size changes.

<fit-vids>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/mREx1RkRv5g?si=tL6MsTa_YAvAD45-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</fit-vids>