Create YouTube-like adaptable view using CSS and jQuery

November 8, 2009

Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed “change view” feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all the information remains easily accessible.

View demo

Wireframes above shows what happens when you change the view. By changing to wide view sidebar goes down and content stretches fully. Creating this is very simple. The trick is in properly defined structure and a bit of jQuery.

Structure

This is the most important part of the story. In order to simulate YouTube structure we will define five sections: header, content, comments, sidebar and footer. The structure we need is quite simple:

<div id="header"></div>
<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="comments"></div>
</div>
<div id="footer"></div> 

The key is in CSS – content and comment areas will float to the left, while sidebar will float to the right. This will allow for sidebar to go down when content streches without disturbing the layout. They will be placed inside container “main” that will clear all floats. There won’t be any special styling for header and footer.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

Initially, content will be 600px wide (including paddings). When user changes to wide view it will stretch to 960px. To achieve this we will place a command link somewhere on the page, let’s say inside the content area. I used CSS Sprites for the command link in demo, but you can create a simple textual link as the one below.

<a id="wideView" href="#">Change View</a> 

Interaction

Next we will add a simle jQuery function that will toggle CSS class named “wide”. This class will determine the look of content section in wide mode.

$(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

So “wide” CSS class wouldn’t contain nothing more than width property set to 900px (with paddings it will be 960px total, which is the with of out sample website).

#content.wide { width:900px;}  

The only thing you need to do next is to check the demo and try clicking on “wide view” button ot go direclty to YouTube – Projcet Home page and try playing with the layout. You can even watch that fantastic movie and see what we, humans, did to our planet.

Conclusion

I really like adaptable views. In one of my previous articles, Adaptable View – how do they do it I explained two great examples of this UI pattern. YouTube example is also a great solution that could could be very useful. Additionaly, you can remember users’ choices and show wide view whenever they come to your site (or as long they have your cookie). Would you use this feature somewhere?

Let's discuss this on twitter.

26 Comments

  • webmasterdubai (November 9, 2009)

    nice and easy way to use script with jquery thank for good example and work

  • Jin (November 9, 2009)

    Great technique! Also, thank you for linking to that Youtube video, simply amazing, I’m still watching it now..

  • Yigit Ozdamar (November 9, 2009)

    Congrats! It’s really nice tut. Thank you!

  • Muhammad Mosa (November 9, 2009)

    Good post Janko, I liked the new demo section, attractive

  • Janko (November 9, 2009)

    Thanks everyone!

    Jin: Thanks! The video is truly amazing. We all know more or less that we’re not conscientious towards our planet, but when you see something like this it is really shocking.

  • designfollow (November 9, 2009)

    great tutorials

    thanks

  • Soh Tanaka (November 9, 2009)

    Simple yet very effective technique :-) Awesome tutorial Janko

  • Sunny Singh (November 9, 2009)

    I did this earlier with my new music video pages. Also made it scroll down so the enlarged video fill more of the screen.

    See for yourself: http://music.myunv.com/videos/jay-z/run-this-town/

    I did adapt your "lights out" script though, helped a lot!

  • pensiun kaya (November 10, 2009)

    amazing tutorial janko, sorry i’m newbie on this. i just visit ur blog today..thanks

  • Davide Espertini (November 10, 2009)

    Great resource Janko! :D

  • clippingimages (November 11, 2009)

    WoW :) Awesome tutorial. Very Cool to learn . Easy and well defined. Thanks to sharing this nice post.

  • Jason (November 11, 2009)

    Excellent post, and nice idea to mimic YouTubes functionality. I’d suggest adding a "return false" line to prevent jumping for sections below the page fold.

    I also like your method of toggling a class rather than explicitly defining width dimensions, which follows the separation of behavior and style principles.

    Jason
    http://codecopia.com

  • Website laten maken (November 11, 2009)

    Another great tutorial Janko! Great video too ;-)

  • Phil (November 18, 2009)

    Very unique and usefull tutorial, I’ll try this out asap.
    Take care

  • Harsha M V (November 27, 2009)

    amazing post

  • Benoit (December 2, 2009)

    Simple and slick. I love that stuff!

  • SJL Web Design (December 3, 2009)

    Thanks for this great script Janko, very simple and attractive.

  • maurohead Méndez (December 5, 2009)

    Great, nice..beauty

  • Adii (December 12, 2009)

    Nice great tutorial ,

  • Bluesplayer (December 27, 2009)

    Hi

    Brilliant coding and has really helped to enhance my ‘YouTube Video’ site. I have combined this with the api code to adjust the player size on the fly. They work very sweetly together. See this page as an example: http://bluesplayer.co.uk/youtube_sexy/video/zoUEMZnibS8/pulp-fiction-dancing.html

    Thanks!
    Bluesplayer

  • Scyfox (December 27, 2009)

    One great thing could be making the large visualization to show the "more" tag.

    You could hide the more part in this place, so you don’t have to move to another page to see what’s comming .

    Just a thought

    Silla!

  • Angelo C (January 30, 2010)

    Hi I’m peruvian I don’t speak english very well but I try, I think your page is very very good, Yo aplaudo tu trabajo, me sirvio de mucho tus aportes gracias.

  • jones (February 13, 2010)

    Nice post, thank for your share.

  • Mens Ties (February 26, 2010)

    Good Technique ! It’s really an easy way to use CSS script with jQuery. your tutorials have always been very useful to me.

    The adaptable view has become a trend nowadays. No only it enhances the design and look of the page but also the user experience.

    Thanks and Keep Rocking!!!

  • Miroslav (February 27, 2010)

    Veoma korisno !

  • Jim (April 8, 2010)

    Can this slide to the new positions?