How to Add Background Images to YouTube Videos in Blogger


Apple iPhone 7 Plus (256 GB): for Best Commentators
Winner will be announced on 30 January 2017.


Background Images to You Tube Videos in Blogger
I hope this tutorial will help you to guide to add a beautiful background to your You-Tube videos in blogger blog. By adding this background you can give a different look to your YouTube videos. Here I would like to explain two different style background style for your YouTube videos and I got inspiration for this tutorial from Digital Inspiration and Spice Up Your Blog. I surely hope that your readers will like new styles of video sharing.  Lets see how to do this.


youtube background images How to add background images to YouTube videos
As I mentioned in above there are two styles of background images for your videos. To add this background images to your blog post switch your blog post from Compose to EDIT HTML mode while you writing post and use the following HTML code in your post to add background to your YouTube videos. Here I use the video of "iMac 27" for video editing" for a demo.


Style 1 demo


This is the style which I have seen in blogger tutorial blog Spice Up Your Blog from Paul Crowe. From that day onwards I was searching for the code and just found the code. Now get your code for this style.

div style="background: url("http://1.bp.blogspot.com/-rs2KTsRJb5U/UAwZ1VdJSkI/AAAAAAAARQA/3rGhi0nsD1E/s1600/youtube-background-style.png") 
no-repeat scroll left top transparent; height: 364px; margin: 0px auto; 
padding: 19px 0px 0px 22px; text-align: left; width: 532px;"><iframe allowfullscreen="" 
frameborder="0" height="298" src="http://www.youtube.com/embed/FLAp9zFHZQs" 
width="498"></iframe></div>


In highlighted area you can see the YouTube video ID. That's FLAp9zFHZQs. So change this ID with your video ID. Also you can adjust the dimensions (height x width) of your video 360 x 550 according to your blog.


Style 2 demo



Its an another style which is totally different from above background (style 1 demo). This background I have seen from the most popular technology blog Digital Insiration from Amit Agarwal. Now get your code for this style.

<div class="youtubeBorder">
<div class="post-video" style="text-align: center;">
<span class="youtube"><iframe allowfullscreen="" 
class="youtube-player" frameborder="0" height="360" 
src="http://www.youtube.com/embed/FLAp9zFHZQs?wmode=transparent&amp;
fs=1&amp;hl=en&amp;modestbranding=1&amp;iv_load_policy=3&amp;showsearch=0&amp;rel=0&amp;theme=light" title="YouTube video player" 
type="text/html" width="550"></iframe></span></div>
</div>

As I mentioned in style 1 demo, In highlighted area you can see the YouTube video ID. That's FLAp9zFHZQs. So you can change this ID with your video ID. Also you can adjust the dimensions (height x width) of your video 360 x 550 according to your blog. 

question mark icon.png How to get YouTube video ID
Its quite simple. You Can get the YouTube video ID from the URL as shown the screenshot below

How to get You Tube video ID

Hope you liked this post. If you have any doubt feel free to ask through our comment system or Contact form. Also get free daily articles directly to your mail inbox. Subscribe us with our Newsletter. Happy blogging:)