Embed your YouTube Videos inside a Television Frame

So videos usually make your tutorials much more fun to understand and interact upon. You can easily record anything and then upload that video to YouTube for embedding it on your website, well now if you are looking for some way to enhance your youtube video base then you can look forward too adding your youtube videos inside a television frame so it attracts more users to watch your video.

We are not going to use any kind javascript or other heavy stuff to get this effect but we will be using simple image and CSS in combination to get this awesome effect. So now just check below demo on how this effect looks like.

So now if you love this awesome television base for your youtube videos then just follow below tutorial to get this effect on your blog too.

Open Blogger > Template > Edit HTML.
Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.
.television-base{background:url(http://i.imgur.com/VFlxiox.png) no-repeat top center;height:458px;width:580px;padding-top:38px;padding-left:72px;;margin-left:30px}
Now hit Save Template, now your CSS styles are places, now its time to display this awesome effect in any of your posts.
So just copy below HTML code and then just change the YouTube video ID with yours personal video you want to embed.
<div class="television-base"><iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/kHj7fqbNaQw?feature=player_embedded" width="511"></iframe></div>
So just make changes to that blue ID highlighted above and do not make any changes to the size and other stuff as it might make your code bad.

So guys this ends this awesome tutorial of embedding your youtube videos right inside television base, so if you loved this tutorial make sure to like this post below and share this post with all your friends have fun and enjoy.

13 October 2013

Embed your YouTube Videos inside a Television Frame