how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)
If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:
<iframe style="border:Xpx solid #yourhexcode" frameborder="0" width="X" height="X" marginheight="0" marginwidth="0" scrolling="no" src="yourmapurl" width="X"></iframe>
And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!
<iframe style="border:8px solid #111111" width="500" height="410" src="hhttp://www.youtube.com/embed/rHZUPJji6w8" frameborder="0" allowfullscreen></iframe>
And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!
(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).
