Tutorial: Customize Embedded Video with Photoshop/CSS

Hello there, for the first tutorial, I would like to teach you "How to customize your embedded Youtube video in your blog".

When you put the embedded video such as Youtube video, the player just like this:

How to change the player to become this:


Step 1: Identify

Here is the code that you can copy on the right panel from Youtube.

<object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/SZptfFKgcY8&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/SZptfFKgcY8&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed></object>

The main part of the modification is the size of player.

width: 480px
height: 295px

Step 2: Photoshop part

Step 2.1
Create a New Document with width 530px and for the height is 345px to make the layout for our new player layout (increase the size to 50px or higher for the shadow).


Step 2.2
Create the dummy player for Youtube Player with the original size. Click on "Rectangle Tool (U)" and set the fixed size with the original player size (width= 480px, height = 295px). Choose "Grey" color for the foreground and click anywhere in your document. Place the "dummy player" at the center of the document.




Rename the rectangle to "dummy player" to make your work become more easier.

Step 2.3
To make our own player, click "Rounded Rectangle Tool (U)", set the radius to 10px and choose "black" for the foreground. Click anywhere in your document and place it behind the "dummy player". Name it as "custom player".



Step 2.4
Right click "custom player" in the Layers Panel, select "Blending Options" and choose "Drop Shadow". Just follow this setting.



Step 2.5
Here come the tricky part. "Invisible" the "dummy player" layer and the background layer, then, take a "Slice Tool (C)" and cut to 3 slices (top, center and bottom).



Step 2.6
When you're done with your slicing, go to "File > Save for Web and Devices". Press "Shift" and click "top, center and bottom" slice. Save it with "PNG-24"


Okay, we're done with photoshop.

Step 3: CSS

Step 3.1:
Html

<div class="v"><!-- our custom player --><div class="vtop"></div><div class="vbg"><object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/SZptfFKgcY8&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/SZptfFKgcY8&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed></object></div><div class="vbottom"></div></div><!-- end our custom player -->

Explaination

v = the div for the player
vtop = load the top image
vbg = load for the center image and it repeating the horizontal
vbottom = load the bottom image

Step 3.2: CSS

.v { width:540px; height:372px;margin:auto;padding:auto; }<br />.vtop { background:url(images/top.png) center no-repeat;height:30px; }<br />.vbg { background:url(images/center.png) center repeat-y;padding-left:30px;}<br />.vbottom { background:url(images/bottom.png) center no-repeat;height:34px; }

Explaination

.v = we set the width for the player is 540px, and 372px for the height. Margin, Padding = Auto.
.vtop = load the top image called "top.png" and set the height for it or the image can't see.
.vbg = load "center.png" and keep it repeat-y (no need to set the height).
.vbottom = load "bottom.png", and set the height to the image size.

and here is your final result.


download the image here.
p/s: try our player with cross-browser, to avoid some 'craps' annoying the our visitor (I'm not a css expert, I still on learning process).