jQuery Plugin For Auto-scaling iFrames And Images - js-flex-embed

js-flex-embed is a jQuery plugin for responsive iframe and image that makes any embedded content (e.g. Youtube/Vimeo vidoes) as large as possible to fit within their parent container, as well as auto scaling on window resize. The plugin also has the ability to keep media (e.g. images, videos) in their correct aspect ratios when resizing.

How to use it:

1. To use this plugin, you need to import the following files into the html document.

<link href="js-flex-embed.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="js-flex-embed.js"></script>

2. Add the CSS class 'js-flex-embed' to your iframes and images as follows:

<h2>Youtube Video</h2>
<iframe class="js-flex-embed" width="560" height="315" src="https://www.youtube.com/embed/3_Q-yYfjeBM" frameborder="0" allowfullscreen></iframe>
<h2>Image</h2>
<img class="js-flex-embed" data-width="560" data-height="315" src="https://unsplash.it/560/315/?random">

3. Call the function and the will will take care of the rest.

$( document ).trigger( "enhance" );

---

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