FitVids is a jQuery script that resizes videos according to the size of the device’s screen. This means your videos are sized perfectly for iPhone, iPad, laptop and desktop devices.
This feature can be enabled using the Genesis Club plugin. For reasons of performance and efficiency the Genesis Club plugin allows you some control as to where the FitVids scripts is loaded so WordPress is not loading the script unnecessarily on pages where it is not used.
FitVids Settings
Here is the panel found under Genesis Club Miscellaneous Settings
You have 4 choices:
- None – FitVids is never loaded
- Home – FitVids is loaded just on your home page
- On Demand – FitVids is loaded on demand
- All – FitVids is loaded on every page
FitVids Loading On Demand
If you select the On Demand option, the content of the page will be scanned for a responsive video. If it finds one then the FitVids code is loaded, if no video is found then FitVids is not loaded.
Marking A Video As Responsive
For FitVids to work you need to place each video in a DIV element with a class of responsive-video.
For example:
[html]
<div class="responsive-video">
<iframe width="560" height="315" src="http://www.youtube.com/embed/mknOFn5XwKQ?list=UUfaTwP3gkcuYgUhGw_JT_ZQ" frameborder="0" allowfullscreen>
</iframe></div>
[/html]
Mobile Responsive Video Example
When viewing the video below, drag the bottom right hand corner of the window to the left and watch how the video is resized as you move from desktop to laptop to notebook to phone size.
