Make Youtube Video Player Fluid/Responsive - jQuery Fluidify

Fluidify is a really small jQuery plugin which makes the Youtube video player (iframe) fully fluid and responsive relative to its parent container.

The plugin determines the size of the video player wrapper and dynamically changes the size of the Youtube video while preserving the original aspect ratio.

How to use it:

1. Install & download.

# NPM
$ npm install fluidify-video --save

2. Load the JavaScript file fluidify.js from the dist folder.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/fluidify.js"></script>

3. Or from the CDN.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="https://unpkg.com/fluidify-video"></script>

4. Embed your Youtube video into a wrapper element. Done.

<div class="video-container" style="max-width: 800px;">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/W5rMIoqCZug" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Changelog:

2021-05-08

• jQuery listed as a dependency

---

This awesome jQuery plugin is developed by hamb0n3. For more Advanced Usages, please check the demo page or visit the official website.