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).
<iframe frameborder="0" height="292" src="http://player.vimeo.com/video/61702032?byline=0&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).
background: url(http://3.bp.blogspot.com/-PYYORa0ewGY/UUyxViAVMII/AAAAAAAAPHA/mMFJwtPVSm4/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.