From time to time I’ll visit a blog and see an embedded video that spills over the parameters of the blog’s main column and or shows only a portion of the video screen. I’m sure you’ve seen it too. Perhaps you have done this yourself and have wondered how to fix the problem. Fixing that problem is the purpose of this post.
As the vast majority of embedded videos come from YouTube, I’m going to be using a YouTube video in the following directions. The concepts demonstrated can also be used on videos found on TeacherTube, SchoolTube, and many other video sharing sites.
In case you would like to print this or save it for reference, at the end of this post I’ve included a link for downloading a PDF of these directions.
Step 1 (After locating a video):
Open the embed options.
Step 2:
Select a video size that you think is close to the parameters of your blog’s main column. In this step you can also select a border and whether or not related videos should be shown after your video plays. Copy the code provided in the “embed” box.
Step 3:
Paste the video embed code into your blog’s post editor. (Depending on your blogging platform, you may have to do this in the “edit html” mode rather than “compose” mode). Now locate the “object width” and “object height” with the code you’ve copied. Following “object width” you should see a three digit number. That number is an indication of the number of pixels wide your video will be. Reduce the number to make the video player narrower. Now locate “object height” and reduce the number following it by an amount equal to the amount you reduced the width. You’re almost done. “Width” and “height” dimensions will appear again at the end of the code you’ve copied. Alter those dimensions to match the dimensions at the beginning of the code.
For those that haven’t seen it before, here’s the video I used in the images above.
