Supercharge your Site with Video, resize your videos in Responsive Design

  • Published on Thursday, 06 December 2012 05:50
  • Hits: 3562
User Rating:  / 4
PoorBest 

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:

<iframe width="420" height="345"
src="http://www.youtube.com/embed/L1fA70VDRuk">
</iframe>

..and to perform the resizable magic we will embed all this inside a div with a certain style, in this case "myVideo":

<div class="myVideo"><iframe width="420" height="345"
src="http://www.youtube.com/embed/L1fA70VDRuk">
</iframe></div>

Then we will link to "myVideo" style the proper properties and we have this youtube video to get resize to the size of the Screen:

.myVideo iframe,  
.myVideo object,  
.myVideo embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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().

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

So if you place in your joomla template

jQuery.noConflict();

at the beginning and in the fitvids.js replace $() for jQuery() then it should be it.

I also recommend you to take a look to this 2 plugins which can make your life much easier, moreover if using the allvideos plugin:

and to cover any other possible "Elizabeth" which might contact me i also add here the "howto"

RUN RESPONSIVE DESING FOR IFRAME WITH FITVIDS IN DRUPAL or WORDPRESS!!

 

Take a peek to the rest of this tutorial:

Music You like..

IT News to be aware of ..

What's new...

Creating a mobile app in minutes with Ap…

Hits:36

Creating a mobile app in minutes with Appery.io

This video shows how to create a mobile tip calculator app in Appery.io and instantly publish it as HTML5 mobile app.

Read more

AngularJS, Build your App!!

Hits:45

AngularJS, Build your App!!

AngularJS was specially designed to build applications or web apps and not sites. If you just want to create an static site then forget about AngularJS (and go with JQuery...

Read more

AngularJS, No more Dom Manipulation

Hits:167

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more