Introducing YUI3-ReponsiveVids.js

A lightweight, easy-to-use YUI3 plugin for fluid width video embeds.

This plugin is based on: https://github.com/davatron5000/FitVids.js

ResponsiveVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

How Do I Use It?

Include YUI3 and ResponsiveVids.js in your layout and add the script to your videos container using the ".plug()" method.

<script src="path/to/yui-min.js"></script>
<script src="path/to/yui3.YUI3-responsivevids.js"></script>
<script>
  YUI().use('fit-vids', function (Y) {
    Y.on('domready', function () {
      Y.one('body').plug(Y.Plugin.ResponsiveVids);
    });
  });
</script>

This will wrap each video in a div.fluid-width-video-wrapper and apply the necessary CSS. After the initial Javascript call, it's all percentage-based CSS magic.

Currently Supported Players

YouTube	Y
Vimeo	Y
Blip.tv	Y*
Viddler	Y*
Kickstarter	Y*

* means native support for these may be deprecated. If your video platform is not currently supported, try adding it via a customSelector...

Add Your Own Video Vendor

Have a custom video player? We now have a customSelector option where you can add your own specific video vendor selector (mileage may vary depending on vendor and fluidity of player):

  Y.one('body').plug(Y.Plugin.ResponsiveVids {
    customSelector: 'iframe[src^="http://mycoolvideosite.com"], iframe[src^="http://myviiids.com"]'
    // Selectors are comma separated, just like CSS
  });

Note: This will be the quickest way to add your own custom vendor as well as test your player's compatibility with ResponsiveVids.

Ignore With Class

Have a video you want ResponsiveVids to ignore? You can slap a class of responsivevidsignore on your object or container and your video will be displayed as it is defined.

If you'd like to add a custom block to ignore ResponsiveVids, use the ignore option.

  Y.one('body').plug(Y.Plugin.ResponsiveVids {
    ignore: '.mycooldiv, #myviiid'
    // Selectors are comma separated, just like CSS
  });

Known issues

• Vimeo Autoplay API is not compatible with ResponsiveVids in IE11. You must manually wrap videos you want to autoplay.