jQuery Plugin to Make Embed Video Responsive – Fluidify

Here is a cross browser, cross platform plugin for jQuery to make iframe based (i.e YouTube, Vimeo & DailyMotion) embed videos responsive. The Fluidify is a jQuery plugin to make embed video responsive. It get the available device screen size and resize video iframe according to it.

Plugin Overview

Plugin: Fluidify
Author: Chris Hammond
Licence: MIT Licence
Published: May 15, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 89.9 KB

How to Make Embed Video Responsive

1. Embed YouTube video in your HTML document with the following div wrapper.

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

2. Load the jQuery and Fluidify‘s JavaScript file into your HTML document to make your embed video responsive.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Fluidify Js -->
<script src="dist/fluidify.js"></script>
The jQuery plugin to make embed video responsive will auto initialized after loading in your page.