Create a Google Plus Youtube Sidebar Pullout Widget Using CSS3 & Jquery (with PSD)
Written by Aaron Lumsden on 05 Nov 2011
Google has recently added more features to its plus one site in order to try raise its profile as a social network. One of these new features is the ability to search youtube videos directly from g+ by use of a slide out youtube tab that sits to the right of the screen. Today I’m going to show you how to create this widget using HTML/CSS3 and Jquery. This is aimed as a guide to show you how you can implement this and perhaps use it as a search widget for your site. I’ve also thrown in the .PSD into the source file as well just for good measure!
What we’ll be creating
The best way to follow this tut is to download the source files and have a look through them. They’re commented to help you understand. Below I touch upon a few of the main points!
Works in Chrome 15+, Firefox 5.01+, IE9+, Opera 11.52+, Safari 5.0.5+
The HTML
We begin by creating a series of four divs and one input.
- .player – The player div is the main container
- .logo – This holds the youtube logo
- .input – The input field for the search
- .searchButton – This will be the main container for the search button
- .searchIcon – This will hold the play symbol for the search button
<div class="player">
<div class="logo"></div>
<input type="text" class="input" label="What would you like to play?" placeholder="What would you like to play?"
<div role="button" class="searchButton">
<div class="searchIcon"></div>
</div>
</div><!--End Player-->
The CSS
The styling is all done using CSS3 all with the exception of the youtube logo and player symbol. We have used a combination of box shadows and gradients to achieve the correct styling. The animation that you see is also done using CSS3 transitions rather than Jquery. You can see an example of this below for the main ‘.player’ div. The full CSS is available in the source file which can be downloaded here
.player{
position: absolute;
right: 0;
top: 150px;
width:25px;
padding: 6px;
background: #F5F5F5;
border: 1px solid #D2D2D2;
border-right-width: 0; /* removes the right border from the player for it to site nicely against the browser window */
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.1);
transition: .218s;
-moz-transition: .218s;
-ms-transition: .218s;
-o-transition: .218s;
-webkit-transition: .218s;
}
The Jquery
In order for the CSS3 transitions to work we need to add and remove some of the classes in order to see the animation. For example on the default player CSS we can see the width set as
width:25px; transition: .218s; -moz-transition: .218s; -ms-transition: .218s; -o-transition: .218s; -webkit-transition: .218s;
However, on ‘.playerHover’ and ‘playerFocus’ we can see that the width is set to
width:286px;
This means that we can add a class (ie ‘.playerHover’) using Jquery for an event such as when the user mouseovers the ‘player’ and remove the class when they ‘mouseout’ from the player. As we have set the transition using CSS3 this will result in the width transitioning between the two width values. You can see an example of this below
var input = $('.input');
player = $('.player');
searchbutton = $('.searchButton');
//On Mouseover of the player, add the class 'playerhover' to '.player' and 'searchButtonHover' to '.searchButton'
player.mouseover(
function () {
player.addClass('playerHover');
searchbutton.addClass('searchButtonHover');
});
//On Mouseout of the player, remove the class 'playerhover' to '.player' and 'searchButtonHover' to '.searchButton'
player.mouseout(
function () {
player.removeClass('playerHover');
searchbutton.removeClass('searchButtonHover');
});
We use this same principle of adding and removing classes throughout the Jquery code.
You can download the full source file along with the PSD to this tut here
Say Hello to WebRTC, a HTML5 Framework That Will Revolutionise the Web
An Introduction to CSS Variables
Responsive Web Design Made Simple with Adobe Edge Reflow
Thank you very much for this tutorial. It was really helpfull and simply explained..I used it immediately and it worked like a charm.. Thanks again and keep up the good work
I like to be able to search for videos on youtube? I know this is just the css, but you know how to get the look you want videos?
Thanks!
Hi, at this stage its only a HTML/CSS/Jquery tutorial. I might look into doing it into a full blown tutorial in the future but it’s not something I’m considering at this stage. If you have a look at Youtube’s API’s then that should point you in the right direction to making it so that you can search the videos on youtube. https://developers.google.com/youtube/
Hi aaron,i have a problem with this script,if i execute the horizontal scrolling,i watch the input, how can i do so as that see only on mouse over?