Responsive Video and FitVids

By Devin

video

If you develop responsive WordPress themes, you’re likely making sure embeds and iframes resize within the container. Something like this does the trick:

/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
	max-width: 100%;
}

But the problem with video embeds is that the aspect ratio isn’t maintained at smaller screensizes. A quick for this is the tiny jQuery plugin FitVids.

There are a few WordPress plugins that enable users to load FitVids on their own- but it requires people to know the CSS selector that wraps the video, and even more importantly, that they need to install the plugin.

I’ve noticed a number of theme companies (Array, Theme Foundry) bundle FitVids.js by default so users don’t need to worry about it at all. I’ve started to do this with my themes as well.

Load FitVids.js from the Theme

To get it set up, download jquery.fitvids.js from the GitHub repo.

Load it from your functions.php file:

wp_enqueue_script( 'prefix-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), '1.0.0', true );

You’ll also need to init the script, so either drop this at the bottom of your jquery.fitvids.js script or another one that you’re loading:

// Init fitVids
jQuery( document ).ready( function ($) {
	if ( $.fn.fitVids) {
		$('.hentry').fitVids();
	}
});

If your content is wrapped in something other than the selector ‘.hentry’ you’ll also want to update that.

Efficient?

FitVids minifies down to 1.7kb- so there’s not that much overhead, especially if you’re loading a script file anyways. Just concat all your script files and load them as one. If you’re interested in reading more about that, see my post on Grunt.

But, if you’re a super performance nerd, read this more recent post about conditionally enqueuing FitVids.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

6 Responses

  1. AJ Clarke

    I’m not sure if it’s still the case but in the last update of Chrome having fitvids.js on your site would prevent Google Fonts from rendering :(

    I would highly recommend a different approach:

    1. CSS – http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    To target embeds only you can use: https://gist.github.com/wpexplorer/7657a3cfd2e0c5034f16

    2. Or this script which I like a lot more then fitvids and didn’t have any issues in Chrome – https://github.com/toddmotto/fluidvids

    Just muy thoughts, maybe you’d want to check them out ;)

    ps: I would also recommend wrap your JS like this instead (just to keep up with WP standards):

    (function($) {
	"use strict";
          $(document).ready(function (){
              // CODE
          });
})(jQuery);

    pss: Still would love to have you contribute sometime at WPE! ha

      1. AJ Clarke

        Nice, looks like Chrome fixed the bug finally, it was in the track for ever. Well with all my customers bugging me I had to switch it out pretty much instantly (can’t wait for browsers to update). But that’s good that its all working now!

        Thanks for the link to the core track, will check it out.

  2. Mickey Kay

    I’ve been loving the Responsive Video Embeds for solving this issue (no settings, just install and it works):
    https://wordpress.org/plugins/responsive-video-embeds/

    I’ve seen some of the trac conversation around incorporating fitvids, or similar script, into core and I’d love to hear more thoughts on the arguments for and against.

    As much as I love what fitvids does, incorporating it into core (or even a theme for that matter) raises a few questions for me:

    1. Are there cases in which videos shouldn’t be fully responsive (e.g. a floated video, a non-responsive site, etc)? I can see this being totally fine in a theme in which the author wants to control video display, however in WP core that’s a whole other kettle of fish.

    2. “Styles belong in themes, functionality belongs in plugins” – I know this mantra doesn’t apply 100% across the board, and the case of fitvids seems to be right at the edge of this advice. Creating responsive images lies in the realm of CSS, so I can see how responsive videos would as well. I can also see how responsive videos relies more heavily on functionality (JS), and therefore might be better placed in a plugin. No answers here :)

    3. Any thoughts on responsive videos/images defaults being incorporated into browsers? Not sure what this process looks like, but both issues seems common enough to possibly warrant some default browser settings (much like browsers add default margins to paragraphs if no margin is specified). Any thoughts on the future of responsiveness being incorporated in more fundamental ways?

    Great post!

    1. Devin

      Hi Mickey. I don’t like it when WordPress injects styling/scripts onto the front end- think of captions and gallery styling (which were recently removed!). Ideally browsers or the video providers themselves will figure out a way to solve this common issue. I don’t think it’s something that should be tackled by core- but theme makers should definitely take it on as a challenge.

Leave a Reply