Responsive Videos for WordPress

Responsive Videos for WordPress

If you have a responsive website, you know the lovely feeling of having full width photos at any screen size. It’s delightful, isn’t it? And so easy.

Unfortunately, if you put videos on your site, they are not responsive–at least, not without some code. Even if you set your video width at 100% in the hopes that it will resize, the height doesn’t follow along, because it isn’t as simple as working with an image.

Responsive WordPress VideosThere are some responsive video plugins out there, and if they work for you, that’s fabulous. I’ve had a bit of trouble, though, and have ended up with a slightly different solution, which is easy to implement if you’re willing to get your hands a little bit dirty. If you’d like to see it in action, check out SM2’s “Slightly Less Unexpected Journey”.

I use Todd Motto’s Fluidvids script, which is open source (MIT license) and available for download on Github. You may want to download the latest version from him, to make sure it’s totally up to date. It works automatically with youtube and vimeo; you can add other services into the script if you need.

Although I use Genesis from StudioPress, this should work for any WordPress theme.

You really only need one file from him, and that’s the actual fluidvids.js file (unless you want to use fluidvids.min.js, which you are totally welcome to do):

/*
Fluid and Responsive YouTube/Vimeo Videos v1.0.0
by Todd Motto: http://www.toddmotto.com
Latest version: https://github.com/toddmotto/fluidvids
Copyright 2013 Todd Motto
Licensed under the MIT license
http://www.opensource.org/licenses/mit-license.php
A raw JavaScript alternative to FitVids.js, fluid width video embeds
*/
(function() {
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; ++i) {
var iframe = iframes[i];
var players = /www.youtube.com|player.vimeo.com/;
if(iframe.src.search(players) !== -1) {
var videoRatio = (iframe.height / iframe.width) * 100;
iframe.style.position = 'absolute';
iframe.style.top = '0';
iframe.style.left = '0';
iframe.width = '100%';
iframe.height = '100%';
var div = document.createElement('div');
div.className = 'video-wrap';
div.style.width = '100%';
div.style.position = 'relative';
div.style.paddingTop = videoRatio + '%';
var parentNode = iframe.parentNode;
parentNode.insertBefore(div, iframe);
div.appendChild(iframe);
}
}
})();
view raw fluidvids.js hosted with ❤ by GitHub

Put this file in your theme’s /js folder, wherever it is, or make one if you don’t have one.
Before you do this next part, make sure that you’ve got a clean copy of your functions.php file backed up in case you make a typo or something–mucking with this can take down your site if you’re careless. Your next and final step is to add this code to your functions.php file:
<?php
//* Do NOT include the opening PHP tag. This code needs to be added to your functions.php file.
//* Add fluidvids to theme
add_action ( 'wp_enqueue_scripts', 'rgc_fluidvid' );
function rgc_fluidvid() {
wp_enqueue_script( 'fluidvids', get_stylesheet_directory_uri() . '/lib/js/fluidvids.js', array(), false, true ); // Responsive Videos
}
//* You will need to create folders called lib/js inside your theme and put the fluidvids.js file in it, or else change the path above.
view raw functions.php hosted with ❤ by GitHub

Seriously, that’s it. I mean, change your directory file path if you need to, but there are no settings to tinker with–it just works. Which means that Todd Motto rocks.

Now, go forth and embed some videos!

Do something awesome. Tell a friend:

subscribe by email

If you're an email kind of person, that's totally cool. Go ahead and sign up here to get the latest blog entries in your inbox! No worries, I never share your address.
  • This field is for validation purposes and should be left unchanged.

Reader Interactions

Comments

  1. March 25, 2016

    Thank you for this tutorial Robin!

    I had a question. If I wanted to only target iframes inside a class, would I change the code to:

    var iframes = document.getElementsByTagName(‘.entry-content iframe’);

    This doesn’t seem to be working. I’m not sure what I’m doing wrong.

    • March 28, 2016

      I really need to update this post, because the original Fluidvids script has changed significantly now, and what you’re wanting can be done easily with the newer script. Give me a few days and I can update.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple