Tuesday, March 4, 2014

How to Add Beautiful Image Border to Embed Videos in Blogger

Author: Gagan Masoun
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
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(http://4.bp.blogspot.com/-FfNZHQ1OJ0U/UxbGnrWbGrI/AAAAAAABBHw/h6UthHRBzTI/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.

4 comments:

  1. Great post on creating video border for youtube videos. Thanks for sharing

    ReplyDelete
  2. +Gagan Masoun: Thanks for sharing.
    Please show me: Add seconds code into "above" or "below" of "b:skin" tag.
    Thanh you so much

    ReplyDelete
    Replies
    1. Add second code just above b:skin tag in your Blogger Template.

      Delete