Make Youtube Video Player Fluid/Responsive - jQuery Fluidify

Make Youtube Video Player Fluid/Responsive - jQuery Fluidify
File Size: 88.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="./dist/fluidify.js"></script>

3. Or from the CDN.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</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>

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