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

Category: Javascript , Layout , Recommended | October 18, 2023
Author:davatron5000
Views Total:124 views
Official Page:Go to website
Last Update:October 18, 2023
License:MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply