THE TGB ELDER GEEK: Resize a YouTube Video
Thursday, 23 July 2009
EDITORIAL NOTE: Virginia DeBolt (bio) writes the bi-weekly Elder Geek column for Time Goes By in which she takes the mystery out of techie things all bloggers and internet users need to know to simplify computer use. She has written several books on technology and keeps two blogs herself, Web Teacher and First 50 Words.
You can put YouTube videos on your own blog. If it doesn't quite fit into the space you have, you can resize the video to fit.
We'll look at how you get a video and then talk about how to resize it.
Get the Video
There are two ways to get a YouTube video. The first way only adds a link to the video to your blog. Sometimes this is the only option available, depending on the video.
If you want to use the link to the video, find the spot to the right of the video that says URL. You see that with a red oval around it in this image.
A single click inside the field where the URL is given should be enough to highlight the URL. When the URL is highlighted, copy it. You can copy using the keyboard command Ctrl-C (Cmd-C on a Mac). Press both the Ctrl key and the C key at the same time. You can also copy using the Edit menu: select Edit > Copy.
Your next step in the process would be to go to your blog and paste that URL where you wanted it. But I want to talk about the other option for getting a YouTube video before we do that part.
The other way to get a You Tube video is to embed it in your blog. When this option is available for a video, you see it on the right of the video after the word Embed. In the image, you see it marked with a red oval.
Once again, a single click anywhere in the code should be enough to highlight all the code. In exactly the same manner as I explain above about copying a URL, you copy this code.
Add It to Your Blog
Whether you copied the URL or the embed code, you are now ready to paste that into your blog.
If you are creating a link with the URL, first type the words you want your reader to click. Then highlight those words and use your blog's linking tool to open up a window that allows you to paste in the URL for the link. Paste using the keyboard command Ctrl-V (Cmd-V on a Mac) or select Edit > Paste from the menu.
When you close the window, you should have a clickable link to the video on your blog.
If you copied the embed code, you probably have an extra step. In Wordpress, which is the blogging platform I use the most, the embed code has to be entered into the blog post using the HTML tab. Click the tab that says HTML (highlighted with a red oval in the image). Then paste in the code. It may look somewhat different on a blogging platform other than Wordpress, but you should have the same function available.
Once you have the code entered on the HTML tab, you can click back to Visual to see how it looks.
In Wordpress, I don't actually see the video. I see a placeholder with a little "f" in the middle. (The "f" stands for Flash video.)
Resize the Video
Click on the placeholder image for the video. That selects it. You'll see the placeholder image becomes wrapped in a border and small boxes appear at the corners and sides of the borders. These boxes are resize handles.
If you hold your mouse over any of the corner boxes, you should see the cursor change. When you see the changed cursor, you are ready to resize.
To resize, you click and drag. There's a fine point to resizing. If you want to keep the proportions (the height and width relationship) of the image the same, you need to hold down the Shift key while you click and drag. If you don't use the Shift key to constrain the proportions, you may distort the image by making it too tall and narrow or too short and wide.
Use your free hand to hold down the Shift key. Then with the mouse, left-click on a corner box and drag inward with the mouse to reduce the size of the video. Wordpress displays numbers, so it's easy to see when it's small enough. Wordpress also displays a dashed outline of what the size it will be. When you stop dragging and release the left mouse button, the video will be resized.
If you don't quite get it right the first time and want do-overs, remember to hold down the Shift key while you try again.
The video placeholder is still bounded by a border and the resize handles when you release the left mouse button after you've dragged. You want to move away from that selection. If you have some words typed in your post, you can just click on the words to reposition the cursor. If you don't have anything typed yet, you can use the arrow keys on your keyboard to move to the right of the video, where you can start typing your post.
I Don't Have Resize Handles. What Do I Do?
If your blog doesn't give you the nice bounding box and resize handles for dragging to a smaller size, you can still resize the video. You have to do a little math. And you get to play in the HTML code!
In the embed code you copied from YouTube, look for something like this:
object width="425" height="344"
Those numbers determine the display size. You can change the numbers. The math involved is easy with a calculator.
Do the same math on both numbers. (The numbers represent pixels, by the way. Pixels are the units your computer screen uses to measure things.) Suppose you want the video to be 75 percent of the original size. Here's how I find 75 percent on my calculator - if you still remember your high school math you may have another way to do it.
425 x .75 = 318.75
Round that off to 318. Change the width to read width="318". Then use the same percentage to calculate the height.
344 x .75 = 258
Change the height to read height="258". You reduced the width and height by the same proportions.
Of course you could make it 50 percent of its original size by doing 425 x .5 = 212 and 344 x .5 = 172. Or 85 percent of its original size by - well, you get the idea. Just use the same percentage on both numbers so that you keep the proportions right.
Put the new numbers in the code (be sure you don't remove the quotes around the numbers when you change them) and the video will display at the new size. Also be sure to replace the numbers in the TWO places in the embed code where they appear – near the beginning and near the end.
At The Elder Storytelling Place today, Ronni Prior: Fun at the Carrie Underwood Show
Thank you so much. I always love TGB, and your column is must-reading for me!
Posted by: Sixty and Single in Seattle | Thursday, 23 July 2009 at 06:04 AM
Thank you. :)
Posted by: Mage Bailey | Thursday, 23 July 2009 at 07:25 PM
I put up on my site a few days ago a YouTube tutorial on how to post videos to YouTube.
BTW, excellent piece on health care. I usually don't read pieces that long, but I read yours all the way through.--Russ
Posted by: Russ Nichols | Thursday, 23 July 2009 at 09:19 PM
THANK YOU! I googled "resize a youtube video for wordpress blog" and this post was the second result. I knew I could click the image placeholder for a photo to resize it, but I never noticed that a video had those handles to drag. It was JUST what I needed!
Posted by: Elizabeth | Friday, 23 October 2009 at 06:52 AM
That worked. Fine tuning them YouTube videos and all.
Posted by: Phoenix Video Production | Friday, 21 May 2010 at 08:27 PM
Alike Russ, even I don't read the post as long as this. The writing was informative and interesting throughout and obviously seems of help for many of the commenters here...
Thank you for such a wonderful post...
Posted by: video publishing sites | Monday, 11 April 2016 at 05:36 AM