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.
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 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGIMhNjUHtPsSrdhFME0W5fn1GcLVIqOFxJ5UHTESfyGBMmhnVl6wkk5cJOKPBBAmAUM4KcVLcJ8gIXHRcWWyItYYzqRivhZjHplnVYRPOT7330ri8WKn5bCxkoC8Cb6iKpkBblL7Hnmnu/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 RedMarked digit for YouTube Video's frame height and width according to your blog post body width.
- Replace Greenmarked 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.
EmoticonEmoticon