Tag Archives: youTube

Laying Out a Website with Inkscape

Posted on by

The other day I decided to revamp my website but with the slightly difference that in my house I have a Linux Unit with Ubuntu 13.12. So I don’t have the option of any Adobe brand product, first because I want to proof that open source rocks, so I give Inkscape™ a try, my favorite open source application.

Along with Inkscape in this tutorial I use another favorite one, Netbeans™ as my IDE to develop and code the tutorial test website, which I call “poolweb” not knowing that there is a poolweb.com website… Awkward. So it goes, free advertisement.

Also this video was recorded and edited with open source software. Record My Desktop™ and Openshot™. The music credit goes to Doorwatcher from iStockPhoto.com. Thank you so much for the calming and relaxing tune.

With these two powerful tools, Inkscape and Netbeans, you will be amaze on how easy is to conceptualized, design and develop a website with them. It took me around an hour because is kind of hard to talk and think at the same time. But I hope you enjoy this tutorial.

Happy designing and coding!

Making your videos responsive to screen resolution with JQuery

Posted on by

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