YouTube Embedded Video T.V. Effect For Blogger

You might be thinking that what is this? Is it a widget or something else for blogger. This is not a widget. This is the newest and the first "YouTube Embedded Video T.V. Effect".As you can see in the image, it looks like we are watching a television. Yeah! it looks damn real and the best thing about it is that it is not made up of any big script or any jquery or javascript. This is made of pure CSS. Hence it takes a very less time to load. Also you can see that there is a tagline below the tv screen. This is also editable. It is not already added in the background image. So, you will have full control over it. So, don't get too much excited have a look at the demo below.

Demo:

iPhone 4 Release

How To Add Youtube Video T.V. Effect To Blogger- Step By Step:

1.Direct Method:

Go to Youtube Video T.V. Effect Generator.
You will see two text box.
Paste the Youtube Video Embed URL in the first box.( How To Get Youtube Video Embed URL )
Type your Video's name in second box.
Now, click on Generate.
A code will be displayed.
Copy and paste it where you want the video with T.V. effect to appear.

2.Manual Method:

Part.1 )

Go to Blogger Dashboard.
Click on Templates >> Edit HTML.
Find for <b:skin> tag.
Expand the <b:skin> tag.
Paste the below code just before the end of <b:skin> tag.

.tv-youtube-sbm { background: url(http://2.bp.blogspot.com/-ajKDolejH_M/UZtzn6bv4uI/AAAAAAAACIA/sHi1x_XkOQw/s400/background-sbm-youtube1.png) no-repeat; padding-left:20px; width: 375px; height: 370px; padding-top: 23px; position: relative; } .tv-tag{z-index:999;font-size:30px;font-weight:bold;font-style:italic;font-family: 'Lora', serif;margin-top:-115px;text-align:center;position:relative;display:block;width: 375px;}

Now, find for <head> tag.
Paste the below code just after <head> tag.

<link href='http://fonts.googleapis.com/css?family=Lora:700italic' rel='stylesheet' type='text/css'/>

Part.2 )

Now, wherever you want to add a Youtube video with T.V. effect just paste the below code there.

<div class="tv-youtube-sbm">
<iframe allowfullscreen="" frameborder="0" height="237" width="359" src="http://www.youtube.com/embed/TgFFA12YPjs"></iframe> </div>
<span class="tv-tag">iPhone 4 Release</span>

That's it.

Customization:

Replace the Blue text ( http://www.youtube.com/embed/TgFFA12YPjs ) with your Youtube Video Embed URL.
Replace the Orange text ( iPhone 4 Release ) with your Video Name.