Responsive Video jQuery Plugin

For the longest time I had been using this responsive video script to resize all my videos on the fly. Recently it started giving me some issues since most sites like YouTube starting changing up how they embedded their videos. I decided to go back to square one to figure out a better approach.
After reading Chris Coyier’s Rundown of Handling Flexible Media the option I thought would work best included equal parts CSS and jQuery.
So I give to you my Responsive Video jQuery Plugin:

/**
 * jQuery.responsiveVideo
 * Version 1.1
 * Copyright (c) 2014 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 01/16/2014
 **/
( function($) {
	$.fn.responsiveVideo = function() {
		// Add CSS to head
		$( 'head' ).append( '' );
		// Gather all videos
		var $all_videos = $(this).find( '
				iframe[src*="player.vimeo.com"],
				iframe[src*="youtube.com"],
				iframe[src*="youtube-nocookie.com"],
				iframe[src*="dailymotion.com"],
				iframe[src*="kickstarter.com"][src*="video.html"],
				object,
				embed' );
		// Cycle through each video and add wrapper div with appropriate aspect ratio if required
		$all_videos.not( 'object object' ).each( function() {
			var $video = $(this);
			if ( $video.parents( 'object' ).length )
				return;
			if ( ! $video.prop( 'id' ) )
				$video.attr( 'id', 'rvw' + Math.floor( Math.random() * 999999 ) );
			$video
				.wrap( '
' ) .removeAttr( 'height' ) .removeAttr( 'width' ); } ); }; } )(jQuery);

I put the whole thing up on BitBucket so you can go there to see some examples. Also feel free to contribute if you discovers ways to improve on the code.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie