Making your videos responsive to screen resolution with JQuery

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

function adjustVideoRatioToParent(arr){
    var element = (arr.e === undefined)? jQuery('iframe[src*="youtube"]') : jQuery(arr.e); //set element or elements
    var eParent = element.parent(); //capture parent
    var mxWidth = eParent.width(); //get parent width
    var aRatio = (arr.r === undefined || (arr.r && arr.r === 'ws'))? 'ws' : 'std'; //set aspect ratio to be used
    var useRatio;
    //setting ratio
    switch(aRatio){
        case 'std': useRatio = 3/4; break;
        default: useRatio = 9/16;
    }
    element.css({'width':'100%','height':(mxWidth*useRatio)+'px'});
}

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.

Usage:

Use with any independent object like:
<iframe src="your.youtube.url/id" onload="adjustVideoRatioToParent({e:this,r:'std'});"></iframe>

Or just enter it in you jQuery(document).ready() function if all the videos in the screen will have the same aspect ratio.

jQuery(document).ready(function(){
     adjustVideoRatioToParent({r:'std'}); //for Standard Ratio
     adjustVideoRatioToParent(); //default for Widescreen Ratio
     //also you can use this
     adjustVideoRatioToParent({e:'.standard',r:'std'});
     adjustVideoRatioToParent({e:'.widescreen',r:'ws'});
});

Making YouTube iFrame Responsive

A sample of a code use in a web I’m working on.

How to make it with plain JavaScript? Just watch this video

Hope this helps!
Happy Coding

Getting the ID of an element with plain JavaScript

I was searching for this for very long and didn’t really found something useful unless using a JavaScript framework, but for those who want to learn to code from scratch this is the answer.

First you have to get the element that triggers an event. example:

HTML

<div id="hello" onclick="getId();"></div>
<!-- in Firefox is necessary to include the event in the function -->
<div id="hello" onclick="getId(event);"></div>

In the HTML page header add the getId(e) function with: (note that I didn’t pass any value in the html code for any browser except Firefox)

function getId(e){
 var tgt;
 var id;
 if (!e) var e = window.event; // if e is undefined
 if (e.target) tgt = e.target; // For most browsers 
 else if (e.srcElement) tgt = e.srcElement; // For microsoft browsers 
 if (tgt.nodeType == 3) // To avoid webkit bug 
 tgt = tgt.parentNode; 
 id = tgt.getAttribute('id',2);
 alert(id);
}

Every DOM event carry out the event information, you only has to targeted, and of course all mayor browser do it differently so you need to code so the right event is processed. Most browsers uses window.event.target while Microsoft uses window.event.srcElement.

First the function try to locate the variable e value, because we didn’t provide it in the html e variable is undefined, so the function create the event, then try to assign the window.event.target as the variable tgt value, if this doesn’t work, the creates the window.event.srcElement object as the variable value. If this failed, for Safari bug then it looks for the window.event.nodeType object and assigned it to the variable.

Once we have our object assign to the variable the function call for the getAttribute() element object. First you tell the attribute name you are targeting, in this case the id attribute. The second value 2 is to get exactly the value of the attribute. Another options are 0 that’s a default and perform a non-case sensitive search or 1 that perform a case-sensitive search of the value. I decided to use 2 because returns the property value as it is set in the script or html code.

That’s it. Nothing to it, I hope this help my fellow coders.

Thanks to
www.quirckmodes.com
www.roseindia.net

Happy Coding!