Responsive Videos

Whenever I hear the terms video and website responsiveness all in one sentence the little hairs at the back of my neck start raising. The reason for this is because videos tend to lose their aspect-ratios as the screen sizes change.

If you embed a YouTube video in WordPress with a theme that does not do things correctly you can expect to see something like this on smaller screens:

The aspect-ratio is all wrong. What you should have seen is something like this:

There are a couple of ways of correcting the error but the best solution that I have found is a script called FitVids.

Copyright 2013, Chris Coyier – http://css-tricks.com + Dave Rupert – http://daverupert.com. Credit to Thierry Koblentz – http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ Released under the WTFPL license – http://sam.zoy.org/wtfpl/

So how do we make use of FitVids?

Javascript Files

You need two Javascript files. Place these files under the same directory your theme uses for Javascript.

The first is a file called jquery.fitvids.js

;(function( $ ){

	'use strict';

	$.fn.fitVids = function( options ) {
		var settings = {
			customSelector: null,
			ignore: null
		};

		if ( ! document.getElementById( 'fit-vids-style' ) ) {
			var head = document.head || document.getElementsByTagName( 'head' )[0];
			var css = '.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}';
			var div = document.createElement( "div" );
			div.innerHTML = '<p>x</p><style id="fit-vids-style">' + css + '</style>';
			head.appendChild( div.childNodes[1] );
		}

		if ( options ) {
			$.extend( settings, options );
		}

		return this.each(function(){
			var selectors = [
				'iframe[src*="player.vimeo.com"]',
				'iframe[src*="youtube.com"]',
				'iframe[src*="youtube-nocookie.com"]',
				'iframe[src*="kickstarter.com"][src*="video.html"]',
				'object',
				'embed'
			];

			if ( settings.customSelector ) {
				selectors.push( settings.customSelector );
			}

			var ignoreList = '.fitvidsignore';

			if ( settings.ignore ) {
				ignoreList = ignoreList + ', ' + settings.ignore;
			}

			var $allVideos = $( this ).find( selectors.join( ',' ) );
			$allVideos = $allVideos.not( 'object object' ); // SwfObj conflict patch
			$allVideos = $allVideos.not( ignoreList ); // Disable FitVids on this video.

			$allVideos.each( function( count ) {
				var $this = $( this );
				if ( $this.parents( ignoreList ).length > 0 ) {
					return; // Disable FitVids on this video.
				}
				if ( this.tagName.toLowerCase() === 'embed' && $this.parent( 'object' ).length || $this.parent( '.fluid-width-video-wrapper' ).length) { return; }
				if ( ( ! $this.css( 'height' ) && ! $this.css( 'width' ) ) && ( isNaN( $this.attr( 'height' ) ) || isNaN( $this.attr( 'width' ) ) ) ) {
					$this.attr( 'height', 9 );
					$this.attr( 'width', 16 );
				}
				var height = ( this.tagName.toLowerCase() === 'object' || ( $this.attr( 'height' ) && ! isNaN( parseInt( $this.attr( 'height' ), 10 ) ) ) ) ? parseInt( $this.attr( 'height' ), 10 ) : $this.height(),
					width = ! isNaN( parseInt( $this.attr( 'width' ), 10 ) ) ? parseInt( $this.attr( 'width' ), 10 ) : $this.width(),
					aspectRatio = height / width;
				if ( ! $this.attr( 'id' ) ) {
					var videoID = 'fitvid' + count;
					$this.attr( 'id', videoID );
				}
				$this.wrap( '<div class="fluid-width-video-wrapper"></div>' ).parent( '.fluid-width-video-wrapper' ).css( 'padding-top', ( aspectRatio * 100 ) + '%' );
				$this.removeAttr( 'height' ).removeAttr( 'width' );
			});
		});
	};

})( window.jQuery || window.Zepto );

The other file is jquery.fitvids-init.js

jQuery( document ).ready( function ($) {
	$( '.post' ).fitVids();
});

.The .post bit might have to change on your theme. This is the class where the videos can be found.

Enqueuing Scripts

All we need do now is to tell WordPress where to find the scripts we have just added. This you do in functions.php or whatever file your theme uses for enqueuing scripts and style sheets.

if ( ! function_exists( 'your_domain_scripts' ) ) {
	/**
	 * Enqueue scripts and styles.
	 */
	function your_domain_scripts() {
		wp_enqueue_script( 'your_domain-fitvids', get_template_directory_uri() . '/js/jquery.fitvids.js', array( 'jquery' ), 'null', true );
		wp_enqueue_script( 'your_domain-fitvids-init', get_template_directory_uri() . '/js/jquery.fitvids-init.js', array( 'jquery' ), 'null', true );
	}
	add_action( 'wp_enqueue_scripts', 'your_domain_scripts' );
}

Make sure that you change this code to match the directory where you added the relevant scripts.

That’s it, your videos will now show the way you expect them to. If you built your theme using the Stix Starter theme you do not have to add these scripts, they are already there.

Thanks for visiting.

Arnold.

Start the Conversation

Your e-mail address will not be published. Required fields are marked *


*


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