yohoho.flexy

An iframe responsive jQuery plugin

Usage no npm install needed!

<script type="module">
  import yohohoFlexy from 'https://cdn.skypack.dev/yohoho.flexy';
</script>

README

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.