Last sunday I received an email from Elizabeth, one of my blog readers, who wanted her videos hosted on website she owns about design to adapt the user's screen size. My first thought was: "easy answer for an easy question" as i believed she was using the video tag, but soon she then mentioned her youtube videos then i had to send her some further tricks to achieve what she requested ....and I thought it will be good to share this with all of you as part of Supercharge your Site with Video tutorial....

First of all the easy part:

RESPONSIVE DESIGN FOR VIDEO TAG

Just set this in the Stylesheet and you are ready to go :)

video {
max-width: 100%;
height: auto;
}

See, an easy answer for an easy question. Let's move on to the next level

RESPONSIVE DESIGN FOR IFRAME

Why frames??, ..easy, videos hosted in different providers need to be embedded in an iframe so you can easily integrate them in your site, as for example happen with youtube or vimeo. This time the code is not as easy but still short enough and quite smooth. The HTML code for youtube iframe would be:

Click HERE and see the example. But we still need more to see on this techniques...

RESPONSIVE DESIGN FOR IFRAME WITH FITVIDS

My opinion is that if something already works why to invent it and this is the case of FitVids!!. fitvids is a great light weight responsive web design jQuery plugin which behaves design responsively small screens as well for large devices.

FitVids works just with jquery. When I recommend it to Elizabeth, on tuesday she came back to me to report she was having some issues with jquery crashing with mootools in her Joomla based template. Wooow it seems that the "easy answer for an easy question" was not as originally thought so I came with a couple of solutions to

RUN RESPONSIVE DESING FOR IFRAME WITH FITVIDS IN JOOMLA!!

The problem was to get both mootools and Jquery running in the same page. This can be done easily by using the noConflict method for jQuery or its alias $. Many JavaScript libraries, as mootools based on prototype, use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to jQuery.noConflict().

Sepelka (JL Castellano)

FreakZion founder and Fortune 500 Company IT Manager. Developer, Consultant, Dreamer and passionate to get full potential for everything from a single project to a whole company with leadership, creativity and commitment.Technology by itself is useless, but in our hands can turn dreams into reality, the forbidden into the affordable, boreness into fun and projects into businesses.