How to Add Image Border to iFrame Videos in Blogger

Socialize It →

Tweet

8

Advertisements

If you embed lots of videos without using any plugin, then most probably you might like to have nice and clean image border across the video. Recently, one of our users asked us How to add Image Border to iFrame Videos in Blogger. Here at MyBloggerLab, we are also using an image border on the introductory iFrame video (that can be seen at the homepage). Therefore, today in this article, we will be showing you how to add image border to iFrame videos in blogger.

The very first thing you be doing is to login into your Blogger account. It depends where precisely you would like to show the embedded video, so either you can go “Create a new post” or you can add it in your “Template code”. To add image border across a video, first you will have to get a proper and working video iFrame code from any of the video sharing websites like YouTube, Vimeo, Dailymotion and the rest of the others.

Once you have the iFrame video code from any of the video sharing site, wrap it around with DIV IDs (as shown in the below code) for example <div id=”video_image_border”><iframe></iframe></div>. By adding a DIV ID, we can easily apply image border to the video with the help of CSS.  (Remember:  Keep in mind that you should retain the height of the video 292px and width 425px for best results).

<div id="video_image_border">
<iframe frameborder="0" height="292" src="http://player.vimeo.com/video/61702032?byline=0&amp;portrait=0" width="417px"></iframe>
</div>

After adding DIV ID, you have to create a simple CSS to apply borders to your video. Though we have already provided a working code below, but you can also create your own code to match your website’s look and customization. (Tip: 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/AVvXsEiHcfjknF6cGaNaLU2j0TBWZyeMUVq4rzOXgvNGi7SFFtQYU79GA2GWcuhVVXCgCDFWu-OSVe_QSRv6zZnocN2zhjX3rdgywrXdBsJFWUiA3pPvqRoHhrHckAmVkcpEyX4MgwaMq8st8sQ/s1600/box.png) no-repeat;
}

We hope this tutorial 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.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).