{"id":1389,"date":"2013-07-03T09:59:35","date_gmt":"2013-07-03T16:59:35","guid":{"rendered":"http:\/\/www.designersgate.com\/blogs\/?p=1389"},"modified":"2013-07-03T09:59:35","modified_gmt":"2013-07-03T16:59:35","slug":"making-videos-responsive-screen-resolution-jquery","status":"publish","type":"post","link":"https:\/\/designersgate.com\/blog\/making-videos-responsive-screen-resolution-jquery\/","title":{"rendered":"Making your videos responsive to screen resolution with JQuery"},"content":{"rendered":"

This is a nice piece of code I found in Stack Overflow<\/a>, but I love the solution posted by Darwin in October 12 2012 and I tweaked to fit my needs and here is my code:<\/p>\n

function adjustVideoRatioToParent(arr){\n    var element = (arr.e === undefined)? jQuery('iframe[src*=\"youtube\"]') : jQuery(arr.e); \/\/set element or elements\n    var eParent = element.parent(); \/\/capture parent\n    var mxWidth = eParent.width(); \/\/get parent width\n    var aRatio = (arr.r === undefined || (arr.r && arr.r === 'ws'))? 'ws' : 'std'; \/\/set aspect ratio to be used\n    var useRatio;\n    \/\/setting ratio\n    switch(aRatio){\n        case 'std': useRatio = 3\/4; break;\n        default: useRatio = 9\/16;\n    }\n    element.css({'width':'100%','height':(mxWidth*useRatio)+'px'});\n}<\/pre>\n
The code will look for the parent of the iframe and will calculate the width of this parent and adjust the aspect ratio of the iframe. The parent could be the BODY of the document or any other element as DIV or ARTICLE or SECTION. You choose.<\/p>\n
Usage:<\/strong><\/p>\n
Use with any independent object like:
\n<iframe src=\"your.youtube.url\/id\" onload=\"adjustVideoRatioToParent({e:this,r:'std'});\"><\/iframe><\/code><\/p>\n
Or just enter it in you jQuery(document).ready() function if all the videos in the screen will have the same aspect ratio.<\/p>\n
jQuery(document).ready(function(){\n     adjustVideoRatioToParent({r:'std'}); \/\/for Standard Ratio\n     adjustVideoRatioToParent(); \/\/default for Widescreen Ratio\n     \/\/also you can use this\n     adjustVideoRatioToParent({e:'.standard',r:'std'});\n     adjustVideoRatioToParent({e:'.widescreen',r:'ws'});\n});<\/pre>\n
\"Making<\/p>\n
A sample of a code use in a web I’m working on.<\/p>\n
How to make it with plain JavaScript? Just watch this video<\/a><\/p>\n