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. Fluidify is a jQuery plugin to make embed video responsive. It gets the available device screen size and resizes the video iframe according to it.

How to Make Embed Video Responsive

1. Embed a 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 embedded video responsive.

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

<!-- Fluidify Js -->
<script src="dist/fluidify.js"></script>

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.