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( '<style type="text/css">
				.responsive-video-wrapper {width:100%;position:relative;padding:0}
				.responsive-video-wrapper iframe,
				.responsive-video-wrapper object,
				.responsive-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%}</style>' );

		// 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( '<div class="responsive-video-wrapper" style="padding-top: ' + ( $video.attr( 'height' ) / $video.attr( 'width' ) * 100 ) + '%" />' )
				.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.