Flexy
an iframe responsive very light jQuery plugin
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&showinfo=0" frameborder="0" allowfullscreen></iframe> <!-- embed --> <embed width="560" height="315" src="https://www.youtube.com/embed/x3kfyZJhC3U?rel=0&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.