Responsive and Fluid YouTube Videos - fluidvids.js
File Size: | 9.81 KB |
---|---|
Views Total: | 3767 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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