How To Add Together Ikon Edge To Iframe Videos Inwards Blogger

If you lot embed lots of videos without using whatever plugin, hence most likely you lot mightiness similar to accept dainty as well as build clean icon edge across the video. Recently, ane of our users asked us How to add together Image Border to iFrame Videos inwards Blogger. Here at MyBloggerLab, nosotros are too using an icon edge on the introductory iFrame video (that tin hold out seen at the homepage). Therefore, today inwards this article, nosotros volition hold out showing you lot how to add together icon edge to iFrame videos inwards blogger.

The really commencement matter you lot hold out doing is to login into your Blogger account. It depends where exactly you lot would similar to present the embedded video, hence either you lot tin acquire “Create a novel post” or you lot tin add together it inwards your “Template code”. To add together icon edge across a video, commencement you lot volition accept to acquire a proper as well as working video iFrame code from whatever of the video sharing websites similar YouTube, Vimeo, Dailymotion as well as the remainder of the others.

Once you lot accept the iFrame video code from whatever of the video sharing site, roll it around alongside DIV IDs (as shown inwards 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 attention of CSS.  (Remember:  Keep inwards take away heed that you lot should retain the summit of the video 292px as well as 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 lot accept to exercise a uncomplicated CSS to apply borders to your video. Though nosotros accept already provided a working code below, but you lot tin too exercise your ain code to gibe your website’s await as well as customization. (Tip: Add the next code but to a higher identify b:skin tag inwards 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/AVvXsEgbe2qZvrY7UTPMunJXbyfnht24KzCQJClDTzxlt9ZWlzXn5-SXUq7mXmsc8E2nLFiiOw3kdZossZrB6k-hYtWTX7wa7ctf1ENB0JeJCLvnq_fHOvNPfXbAR5KQ7inrHb0vMealuMGCGBg/s1600/box.png) no-repeat;
}

We promise this tutorial may peradventure accept facilitated you lot inwards learning how to add together iframe icon edge to videos inwards blogger. However, this technique too plant alongside whatever site that supports HTML as well as CSS. Do part your opinions virtually this tutorial, as well as if you lot accept a amend agency of doing the same matter then, exercise non shy to allow us know inwards comments.