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

  • Published on Thursday, 06 December 2012 05:50
  • Hits: 4189
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:

STORY BY:
Sepelka

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.

Check my LinkedIn Profile
Website: http://www.freakzion.com

Music You like..

IT News to be aware of ..

What's new...

10 Reasons Web Developers Should Learn A…

Hits:617

10 Reasons Web Developers Should Learn AngularJS

There is no doubt that AngularJS – the self-proclaimed “superheroic JavaScript framework” – is gaining traction.

Read more

WooRank Digital Marketing Tool

Hits:222

WooRank Digital Marketing Tool

Would you like to increase the daily visits, to understand what your target customers are looking for, to know what any of your competitors are doing and how to beat...

Read more

Overview of Scrum

Hits:340

Overview of Scrum

Originally, I asked a Scrum Master to help me write something about Scrum. However, he said it may not worth it because there are already too many documents, books out...

Read more