Embedded YouTube Video View in Television Frame

Embedded YouTube Video View in Television Frame

5
data:blog.title
blogger

We Often use YouTube video to share our tutorials in blog. But those if you add YouTube video directly without any code modification then it will not look attractive. There are almost everything we can modify by using CSS. So I think Video sharing has not got any priority among blogger. There are rare tutorial about YouTube video appearance modification. So I have just simply focus on how we can bring some variation to make YouTube video appearance in blogger more attractive.


In this tutorial I have used a TV frame where your embed YouTube video will appear. And your blog visitor will think that you they are just watching TV.

But still using this code create trouble in various blogger template. Because currently blogger templates structure is changing and you won't find a set of template which has same width. For this reason applying this trick require little customization knowledge.  Because your blog post body width is not same.

YouTube

CSS Part of the Trick

You have to use this code only one time in your blog. So please follow the below steps to add the code successfully.

Step 1 Click on  Now click on -> Template -> Edit HTML-> Unfold code  

Step 2 Now Find this code ]]></b:skin> by pressing Ctrl + F

Step 3 Copy the code from below and Paste it  Before/above ]]></b:skin>

/*Trick by www.bloggerspice.com*/
.BloggerSpice-video-Share{background:url(http://4.bp.blogspot.com/-17ioTkYMmoI/UlDrP5WMLGI/AAAAAAAAE6c/ey2exFn_Mbk/s1600/BS+Monitor.png) no-repeat top center;height:458px;width:580px;padding-top:38px;padding-left:72px;;margin-left:30px}

Embed the video in Blog Post

By this code we will embed the video in Blog post. And every time you have to use this code whenever you want to embed a video in your blog post.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Pages -> New Page-> Blank Page

Step 3 Now choose HTML mode instead of Compose mode and Paste the iframe code 

<div class="BloggerSpice-video-Share">
<iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/kHj7fqbNaQw?feature=player_embedded" width="511"></iframe>
</div>

Customization


  • Alter Red Marked digit for YouTube Video's frame height and width according to your blog post body width.
  • Replace Green marked code with your YouTube Video embed code
If you need any further assistance then feel free to contact with me. I will give you instruction about YouTube video frame size for the best fit in your blog post body.
Embedded YouTube Video View in Television Frame
4 Stars stars - "Embedded YouTube Video View in Television Frame " We Often use YouTube video to share our tutorials in blog. But those if you add YouTube video ...

Post a Comment

Simple, but very smart and useful code.

Thanks.....

Welcome Evaggelos..I am developing some more frame for YouTube video. Hopefully I will release soon.

Very nice again!!Thanks a lot!!

thank for commenting..

I will try this! http://uncoverred.blogspot.com/

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *