Jc Codding

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.<br />
<a href="https://www.blogger.com/null" name="more"></a><br />
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 “<a href="http://www.mybloggerlab.com/2012/02/5-basic-tips-to-start-your-blogging.html">Create a new post</a>” or you can add it in your “<a href="http://www.mybloggerlab.com/2013/04/whats-new-in-blogger-template-html-editor.html">Template code</a>”.
 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.<br />
<br />
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 <i><span style="color: #274e13;"><div id=”video_image_border”><iframe></iframe></div></span></i>. By adding a DIV ID, we can easily apply image border to the video with the help of CSS. <br />
(<span style="color: red;">Remember:</span>  Keep in mind that you should retain the height of the video 292px and width 425px for best results).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="266" mozallowfullscreen="mozallowfullscreen" src="https://www.youtube.com/embed/G1Wq1Ym9ljw?feature=player_embedded" webkitallowfullscreen="webkitallowfullscreen" width="320"></iframe></div>
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<span style="color: #6aa84f;"><span style="font-family: Verdana,sans-serif;"><div id="video_image_border"><br />
<iframe frameborder="0" height="292" 
src="http://player.vimeo.com/video/61702032?byline=0&amp;portrait=0"
 width="417px"></iframe><br />
</div></span></span></blockquote>
</blockquote>
<br />
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).<br />
<br />
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<span style="color: #6aa84f;"><span style="font-family: Verdana,sans-serif;">#video_image_border {<br />
    float: right;<br />
    width: 425px;<br />
    padding-top: 33px;<br />
    padding-left: 4px;<br />
    height: 335px;<br />
    margin-top: 35px;<br />
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHkDMrP23xjO-Za5-91ecYOLb0svYoO3VGOMxUDMMNCYhBB7TeUgdbQ_hEerRJik4r3xEiCJAPHRDxsswx6-XRrCue2Uk5AOZ-4EybFgSvbVBawQUeQgXKX4SVtWmTp2RgWAkCtz5uBGo/s1600/box.png) no-repeat;<br />
}</span></span></blockquote>
</blockquote>
<br />
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.<br />
Also share thios helpful tutorial to your friends so they dont have to run here and there.

Add an attractive image boarder to videos

Unknown 0 Blogger, Image Border, Tutorials 22:42