Responsive and Fluid YouTube Videos - fluidvids.js

fluidvids.js is a jQuery plugin for Responsive and Fluid YouTube/Vimeo iframe embeds.

Basic Usage:

1. Markup

<div class="wrapper">

<!-- youtube video --> 
<iframe width="560" height="315" src="http://www.youtube.com/embed/JMl8cQjBfqk" frameborder="0" allowfullscreen></iframe>

<!-- vimeo video -->
<iframe src="http://player.vimeo.com/video/43022942" width="500" height="375" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

2. fluidvids.js

(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);
		}
	}
})();

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.