How To Add Together Icon Edge To Iframe Videos Inwards Blogger

If yous embed lots of videos without using whatever plugin, hence most likely yous powerfulness similar to convey squeamish in addition to construct clean icon edge across the video. Recently, ane of our users asked us How to add together Image Border to iFrame Videos inward Blogger. Here at MyBloggerLab, nosotros are equally good using an icon edge on the introductory iFrame video (that tin survive seen at the homepage). Therefore, today inward this article, nosotros volition survive showing yous how to add together icon edge to iFrame videos inward blogger.

The really starting fourth dimension affair yous survive doing is to login into your Blogger account. It depends where exactly yous would similar to exhibit the embedded video, hence either yous tin become “Create a novel post” or yous tin add together it inward your “Template code”. To add together icon edge across a video, starting fourth dimension yous volition convey to acquire a proper in addition to working video iFrame code from whatever of the video sharing websites similar YouTube, Vimeo, Dailymotion in addition to the residual of the others.

Once yous convey the iFrame video code from whatever of the video sharing site, roll it some alongside DIV IDs (as shown inward the below code) for representative <div id=”video_image_border”><iframe></iframe></div>. By adding a DIV ID, nosotros tin easily apply icon edge to the video alongside the tending of CSS.  (Remember:  Keep inward heed that yous should retain the meridian of the video 292px in addition to 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, yous convey to practice a elementary CSS to apply borders to your video. Though nosotros convey already provided a working code below, but yous tin equally good practice your ain code to jibe your website’s hold off in addition to customization. (Tip: Add the next code only inward a higher identify b:skin tag inward 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/AVvXsEhFHQDJNU0vkqr-bkx4w7k66fa3GmvbuPqtB1wWBz80GMXIjBk8zY22C4_2zOxJr4o8obBmXGk6xDZ8aFAbANBNXsMVvmbUgaoHSY-6Ioi5K_YFkyIGDvMX9i23vJV76t0UrzJcwY3IOs8/s1600/box.png) no-repeat;
}

We promise this tutorial may perhaps convey facilitated yous inward learning how to add together iframe icon edge to videos inward blogger. However, this technique equally good industrial plant alongside whatever site that supports HTML in addition to CSS. Do portion your opinions nigh this tutorial, in addition to if yous convey a ameliorate agency of doing the same affair then, practice non shy to allow us know inward comments.