Customize YouTube Videos Layouts With Attractive Background Images In Blog Posts:Digital Tech Inspiration

You can upload videos directly or from any other video sharing site to your blog/website. If you would like to share a video from YouTube, you can do that too. But when we embed YouTube videos in your blog/website, it's more or less
of attraction because of its dull looks or style in it. But by adding cool attractive background image to your videos, it can give a different look and feel to your YouTube videos resulting to an increase of potential viewers.

So, if you want to add this attractive background to your YouTube videos in your Blog posts, then kindly follow these simple steps below. I am sure your readers will like new style of video sharing. So, let’s get started.

How to Add Attractive Background Image for YouTube Videos?

Style #1: Demo Here

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

]]></b:skin>

STEP #7: Just above that paste the following code.

.youtubeBorder {

background: none repeat scroll 0 0 white;

border: 1px solid #E0E0E0;

border-radius: 2px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

margin: 10px 0 20px;

padding: 4px;

}

STEP #8: Now click on Save and it’s done.

Use the HTML code below in your post. For that switch to the HTML mode copy and paste the code in your post.

How to Customize?

Replace 2Bb8P7dfjVw with your YouTube Video ID.
You can play with the Height and Width and adjust it according to your Blog.

Style #2: Demo Here

Use the HTML code below in your post. For that switch to the HTML mode copy and paste the code in your post.

<div style="background: url(" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs4yQX0hI6KyG7Y23x7pXlW-Hp8dCAWvQ8ao9rpYgIiUTRNeBFN2wNyN6xYKMHxw8DGww_NA3pjP0fUaBs_mmBtdnLl3jqEnTsBAnanZ0vXC0P4kNgtS4wWoaQqgBlFxAiGakyf0q8dWZI/s1600/background-lordhtml.png") no-repeat scroll left top transparent; height: 400px; margin: 0px auto; padding: 22px 0px 0px 22px; text-align: left; width: 540px;"><iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/DyGq4keRlrA" width="520"></iframe></div>

How to Customize?

Replace DyGq4keRlrA with your YouTube Video ID.

Style #3: Demo Here

Use the HTML code below in your post. For that switch to the HTML mode copy and paste the code in your post.

<div style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZzR9zViuKaDcfTVWOzGFY44E14-jpNDaEHgbScVewbLqDNb8Z8mJ_-GHkj40t3ikrogkMVwGD5dj6_Kxkb2T5iWGdKPAuRDDf0ZRAJXIEuKEdvoQxnv7fUwwU_jzKWWkek5z9iWnWAjc/s1600/youtube-background-style.png") no-repeat scroll left top transparent; height: 364px; margin: 0px auto; padding: 22px 0px 0px 22px; text-align: left; width: 532px;"><iframe allowfullscreen="" frameborder="0" height="298" src="http://www.youtube.com/embed/GURvHJNmGrc" width="498"></iframe></div>

How to Customize?

Replace GURvHJNmGrc with your YouTube Video ID.

Where I Can Get The YouTube Video ID?

You can get the YouTube Video ID from the URL as shown below image:

So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.