Despite the fact that our Zentools module can handle responsive video natively we still needed an option that was easy for users to implement responsive video in their sites.
Once installed and published the Fitvids plugin transforms any video added to your content into a fluid / adaptive video element - automagically making it scale to the width of the parent container.
This is a super simple implementation of the Fitvids.js script from Chris Coyler and Paravel. The script loads the css and html markup required to transform fixed width video into a fluid and resizable video elements in a web page.
Demonstration
Despite the fact that this page isn't itself responsive you can see from the examples below how the video automatically fills the width available in the parent element.
Full Width
Fiji Vignette 3/3 from Taj Burrow on Vimeo.
Half Width
Fiji Vignette 3/3 from Taj Burrow on Vimeo.
Quarter Width
Fiji Vignette 3/3 from Taj Burrow on Vimeo.
Using the plugin is simple.
Just install and publish and then if necessary set the selector of the html element that contains the video object that you want to target. By default the plugin looks for the .container rule (which is a generic container we use in Zen Grid Framework v2 Joomla templates), but if you need to be more specific you can enter the specific selector to use for your template in the plugin administrator.
