Blog

iWeb Open Source

Responsive video embedding with FitVids.JS and WordPress

January 04, 2012 | Phil

FitVidsJS

So you’ve built a fantastic, modern responsive website, perhaps using one of the fancy grid systems available. However, your videos don’t resize as gracefully as you’d like.

This is where FitVids.JS comes in. This jQuery plugin does all the heavy lifting for you, resizing your WordPress oEmbeds whilst maintaining the aspect ratio of the video.

The script is simple to integrate into your WordPress theme. Download a copy of FitVids.JS and move the JavaScript file into your theme directory. Reference the script in your theme’s header.php or footer.php:

<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/plugins/jquery.fitvids.js"></script>

It’s then as simple as targeting the container surrounding your content. Many WordPress theme developers wrap content within a .post class. So for example:

<script> $(function() { $('.post').fitVids(); }); </script>

If delving into your theme scares the bejesus out of you, Kevin Dees has wrapped all the necessary code into a WordPress plugin, FitVids for WordPress.

And remember, you can always get in touch with us. We’re a Professional Website Design company specialising in WordPress and Magento development.

Tags:
, , , , ,
Categories:
Plugins, Web Development, WordPress