🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Flexy is a lightweight jQuery plugin designed for responsive, cross-browser website that automatically scales the iframes to make them adapt to any screen size.

IFrame responsive-iframe

Documentation

Flexy Build Status

an iframe responsive very light jQuery plugin
npm version GitHub version

Demo page

Package manager

//bower bower install --save yohoho.flexy
//npm npm install yohoho.flexy

Install

<!-- In your <body> HTML tag -->  <!-- iframe --> <iframe width="560" height="315" src="https://www.youtube.com/embed/x3kfyZJhC3U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>  <!-- embed --> <embed width="560" height="315" src="https://www.youtube.com/embed/x3kfyZJhC3U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></embed>  <!-- video --> <video width="560" height="315" src="movie.ogg" autoplay poster="poster.jpg">     Sorry, your browser doesn't support embedded videos, but you can <a href="movie.ogg">download it</a> and watch it with your favorite video player! </video>  <!-- video --> <video width="560" height="315" controls poster="poster.jpg">     <source src="movie.mp4" type="video/mp4" />     <source src="movie.ogv" type="video/ogg" />     <source src="movie.webm" type="video/webm" />     Sorry, your browser doesn't support embedded videos </video>  <!-- object --> <object width="560" height="315" data="object.swf" type="application/x-shockwave-flash"></object>
//in your main JS file with default options $('iframe').flexy();
//in your main JS file with custom options $('iframe').flexy({     addcss: true,     classname: 'flexy-wrapper',     widescreen: false });

Settings

Option Type Default Description
addcss boolean true Enables default flexy inline CSS applied to wrapper and video element
classname string 'flexy-wrapper' CSS class applied to wrapper
widescreen boolean false Enables wide screen format (16/9). Made especially for Vimeo embed

Dependencies

jQuery latest version

Authors and Copyright

Made with ♥ by Achraf Chouk

Please, read LICENSE for more details.


You May Also Like