How to Add Beautiful Image Border to Embed Videos in Blogger

If you are publishing embed videos in your blog posts without using any plugin, then apparently you might like to have attractive image border across the iFrame video. Few days ago, one of our loyal readers asked us How to add beautiful Image Border to iFrame videos in Blogger/Blogspot blog. Today in this short article, I will be showing you how to add image border to iFrame videos in blogger. Just follow the give below steps:

Add Beautiful Image Border to Embed Videos in Blogger

First of all login into your Blogger dashboard account. To add image border beyond a video, you will have to get a correct and working video iFrame code from any of the video sharing sites like YouTube, Vimeo, Dailymotion and others.

Recommend For You

• How to Create a YouTube Channel Background Image
• Add A Beautiful Background Photo To Youtube Videos In Blogger

When you have the video embed code, wrap it around with DIV IDs (as shown in the below code)

<div id="video_image_border">
<iframe width="417" height="292" src="//www.youtube.com/embed/qrO4YZeyl0I" frameborder="0" allowfullscreen></iframe>
</div>

After the above step, you have to add a simple CSS code. Add the following code just above b:skin tag in your Blogger Template.

#video_image_border {
    float: right;
    width: 425px;
    padding-top: 33px;
    padding-left: 4px;
    height: 335px;
    margin-top: 35px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoalZSpP2WHcF7zpqKU2qpazdDUR9rbjg9sT7RtPpUHYOrRrtD9uyu26vVcaVejgKr5bWx4MzjC6WVYgR1MS3tj3NYvvcZUbOt20YX5QpnCpLjH4CqqgQqqKjS6-1v-fD9DEYysJLVClL3/s1600/video_box.png) no-repeat;
}

We hope this article may possibly have facilitated you in learning how to add iframe image border to videos in blogger. However, this technique also works with any site that supports HTML and CSS. Do share your opinions about this tutorial, and if you have a better way of doing the same thing then, do not shy to let us know in comments.