How to Add Image Border to iFrame Videos in Blogger

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=";portrait=0" width="417px"></iframe>

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( 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.

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

Comment With:
Choose Wisely!


March 1, 2014 at 8:19 PM

Faizan Bro Now days you write just simple contents on MBL while your more concentration on making templates . Why???
By the way this is good article that i always hope from MBL.

March 3, 2014 at 9:27 AM

Can't believe! you just added this article so fast. Now im a Big fan of yours! seriously really nice article Thank you faizan.

March 4, 2014 at 3:09 AM

Faizan bhai! Your Go Green Template does not show social icons on the top of the template and also not the e-mail and telephone icon.

March 5, 2014 at 3:03 PM

yup agreed with you. also you guys owing and which is also rarely updated now :( I am really missing the old days..
keep your efforts up. best of luck

Editorial Team MOD
March 6, 2014 at 9:44 AM

I understand your worry buddies, we are also thinking about going active again. We hope we can push new articles not every day then after every two days. Stay blessed :)

Editorial Team MOD
March 6, 2014 at 9:49 AM

Please Try this:

Editorial Team MOD
March 6, 2014 at 9:52 AM

Glad it helped you buddy


May 11, 2014 at 4:43 AM

Its not working to me :( . Why.. ??

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.