I recently made two upgrades to my blog, both of which took me a few hours to get to work right. The first change was to add an RSS Subscribe button at the bottom of each post. My second change was to add a border around the videos I post, in an effort to keep consistency with the borders around photos. In this second post I am going to show you how to add a border around videos, assuming you use a Blogger template.
The first thing you need to do is sign in to Blogger and then click the "Layout" button. Displaying the raw HTML code is the same process as in the last post for the RSS button.

Once you've done that, click the "Edit HTML" button and then click the check-box for "Expand Widget Templates".

Look for the lines with the following text in your website code:
.post img {
padding:4px;
border:1px solid $bordercolor;
}
Add the following code just below:
div.video {
padding:4px;
border:1px solid $bordercolor;
}
This essentially tells the website that anything classified as a video should use a border that is one pixel large with four pixels of padding. This can be changed to match whatever you use for the image border. Personally, I like the standard Blogger borders. The only problem with this particular method is that you will have to specify a class for any video you post from outside Blogger. For example, if you want to post a video from YouTube, it would look like this:
<div class="video">YOUTUBE EMBED CODE HERE</div>
I also like to keep the video size consistent with the margins of my blog, something necessary for the borders to look right. For this, I will assume that we are talking about YouTube videos. This is the original code for a video:
<object width="480" height="295"><param name="movie" value="http://www.youtube.com/v/hcaNZ4iHSMw&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/hcaNZ4iHSMw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed></object>
Here, the video is 480 pixels wide and 295 pixels tall. This is a problem because my blog is 410 pixels wide, and the video will overflow and look wrong. We need to change both widths to 400 pixels (or whatever the margins of your blog are minus the border) and adjust the height to match the new width while maintaining aspect ratio.
<div class="video"><object style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 236px;"><param name="movie" value="http://www.youtube.com/v/hcaNZ4iHSMw&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/hcaNZ4iHSMw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="246"></embed></object></div>
The more observant of you might have noticed that the object portion of the code has been altered to align the video within the borders, and that the height is 10 pixels less than the embed part of the code. We have subtracted the size of the border on the top and bottom. You may have to play around with the height to make the border even on all sides. Also of note is that the same tags for the video can be used for pretty much anything. For example, the code excerpts in this post use the same div class tags as videos. Here is an example of what the final product looks like:






