Responsive JavaScript Code
21 05, 13 11:53 -- Filed in:
ComputingMany users used to customise the size of browser while surfing the web. Also in wed design, you may want to place a web videos in the page that the video will automatically change the largest scale in the limited space.
How to customise the scale automatically while changing the window of browser? I now introduce such the skill in web design so called "Fluid and responsive video".
A little script in Javascript was provided. It works for the embed web videos code of Viemo and YouTube only. The script as below:
(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);
}
}
})();Please be reminded to place it between the tab of web body in HTML. Enjoy!
Tags: javascript, web design
