I was recently inspired to share a trick on embedding and resizing videos in blog posts and I thought I would share for anyone interested in doing the same.
Most of you are probably familiar with YouTube.com but if not, check it out. I have found all sorts of free video tutorials for quilting techniques, sewing clothing, editing photos, etc. I have noticed that sometimes embedded videos don't exactly fit in the "body" area of a blog web page and hang over into the sidebar or "gadget" area. This is based on the type of template you are using on your blog and the size of the tables the template is coded for.
For example, this is the video the Missouri Star Quilt Company posted on YouTube to announce a giveaway which I won! However, the default size of the video exceeds the width of the content area of my blog. I would really like to re-design my blog so that I better utilize the space but that is a project for another day. For now, I just resize the embedded video! Here it is directly from YouTube:
Wow...that's a big video! It totally covers up my sidebar area where you can see my previous posts, followers, flicker photos, etc. and I really don't want that so I am going to resize it. There are a couple of different ways to do this. You can copy the embed code directly from YouTube and paste it into the body of your post. When you do this you will see the HTML text and you can edit it from there. The code starts with something like this:
object width="640" height="385"
That little bit of code defines the size of the video but it's not the only culprit. Towards the end of that code you will see that the width and height are defined again. To change the size of the video you will need to change the values in both places. I changed this video so that the width is 400 and the height is 285:
Much better right? You can play around with these numbers a bit and preview your post to see how it will look to get just the right size for your post on your blog. However, be careful to only replace the numbers in the code and to not remove any of the spaces or punctuation because they are both part of the HTML "language" and without them your code will be "broken". If you accidentally do this, delete the entire bit of code for the video (not the text you have written though--that should still be ok), paste a fresh version, and make your changes. Simple right?
If you don't see the code text (you will probably see your embedded video there instead) there is another way to see and edit it. You'll notice as you are creating a Blogger post (I am not sure about other blogs) that there are two tabs above the area where you type: "Edit HTML" and "Compose". Blogger is set up to automatically start you on the Compose tab but as you write text, make certain words bold, change the font, etc. you are actually writing HTML. Blogger automatically "writes" the HTML for you as you type but you can see the HTML code at any time by clicking the Edit HTML tab. Click over to the Edit HTML tab, look for the section where your video is embedded, change the values from that screen, and then switch back over to the Compose tab. It's that easy!
Hopefully this information will be helpful to you. I use Blogger but I know there are other blog hosting sites out there that are likely set up very differently. If you have a question about how to do this on the blog host you use just send me an email and I will do my best to help you figure it out.
Now go out there and resize some embedded videos!
UPDATE: I have checked this post out on a couple of different computers and realized that in some cases, the video doesn't "hang" over the content area. Instead, part of the video display is hidden. You can tell if this is the case if any of the 4 sides of the video aren't visible.
No comments:
Post a Comment