Video Player Series- Styling our video player's skin (Part 2/7)

In the last post in this series, we built for ourselves a video player in HTML5 that has custom controls. But we're quite not near our goal yet. Our video player looks different in different browsers.

In this post, we'll start customization by beautifying our video player's skin so that it looks more professional.

Let's build a cool video player in this series...

View Demo

Styling our body

Now, in the previous part we built our custom video player. Let's start with styling it now. First of all let's convert our body to have all of its text centered. It just looks good when your video player text is centered. Again, remember, this is the way I like my video player, you sure can tinker around with the code and build your own beautiful video player that fits you the most...

body{
    text-align:center;
}

Styling our video player's skin

Remember that our video player is 640 pixels wide. So, it really makes sense to have our skin slightly larger than that. If you don't yet get it, why not tinker around with what I'm trying to say in some code editor like JSFiddle?

We can also add some margin and padding for giving ourselves some space around. I'm going to add some values for margin and padding but you can change then with your own convenience.

We'll also add a subtle background to our video player's skin so that it looks like a theater or something...  I'll be adding a subtle black gradient. You can add a solid colour, weird gradient what ever you like it. It's your creativity.

Finally, how about some fancy borders? I don't really prefer rounded corners but let's just add a 10px radius to our video player. But I don't really like borders, so let's set our border to none and set a box shadow so that it looks good.

So, here's our stylesheet for skin

#skin{
    width:700px;
    margin:10px auto;
    padding:10px;
    background:linear-gradient(#111,#333);
    border:none;
    box-shadow:0 0 10px 10px rgba(0,0,0,0.1);
    border-radius:10px;
} 

Styling our <nav> and #buttons

We really don't want our nav to stick to the video so, we set the top and bottom margins to something like 5px. We really don't care about the left and right margins though so let's just set it to 0px.

We want our buttons to the left so we can set the float property to left. The width and height are really your choice again.

So, this is what it looks like

nav{
    margin:5px 0px;
}

/*Our buttons div is called playPause if you remember*/
#playPause{
    width:75px;
    height:25px;
    float:left;
}

Conclusion

So, in this part, we styled our skin to make our video player look more professional. In the next part we'll style our progress bars and probably even the play/pause button. After that we can finally start programming the video player.