Add an attractive image boarder to videos

Most of the sites have beautiful and attracting video image borders which attract user to watch their videos and as a blogger i know how we are doing hardwork to make our blog attractive, helpful and sincere. As bloggers also post many videos with the tutorials but they do not look that much attractive so today i will show you how to add an attractive image to the border of  the video.

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/AVvXsEgHkDMrP23xjO-Za5-91ecYOLb0svYoO3VGOMxUDMMNCYhBB7TeUgdbQ_hEerRJik4r3xEiCJAPHRDxsswx6-XRrCue2Uk5AOZ-4EybFgSvbVBawQUeQgXKX4SVtWmTp2RgWAkCtz5uBGo/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.
Also share thios helpful tutorial to your friends so they dont have to run here and there.