How to Add YouTube Videos to Your TypePad Blog

If you have a TypePad blog and want to add/embed a YouTube video into a post, you're going to have to do a bit of under-the-hood work. Don't worry! It's not as tough as it sounds.

Here's the step-by-step process of embedding a YouTube video into a TypePad blog, even if the YouTube video is too wide.

Step 1: Create your TypePad post. When you're ready to embed the video type in a place holder where you want the video to go. I use "xxx" but you can say "video goes here."

Step 2: Go to YouTube and find the video you want to embed. To the right of the movie you'll find some HTML code under the word Embed. Copy this code.

Step 3: Return to your blog post. Click on the Edit HTML tab above the post box.

If you're not an HTML jockey you may find this intimidating. Don't worry. Find the "xxx" or "video goes here" in the code. Replace it with the embed code from the YouTube video. If you click back to Compose Post and you don't see your video, don't worry, it's there. Finish up your post and hit publish, then go check out your work...you're done!

Dealing with Wide Videos in a Narrow Column

Unless, of course, your video looks like this:

Where the video is wider than the blog column. Many people don't care about this, but if you're anal like I am, you want everything to fit nicely. If so, you're going to need to take a few extra steps.

Extra Step 1: Determine how wide your column width is. There's probably a few different ways to doing this. One would be to get a microscope and count each pixel. Probably not the best use of your time or your eyesight.

On Macs you can command-shift-4 and do a screen capture of the width of the column. On newer Macs as you click and drag the cursor over the column it will tell you how many pixels wide your selection is. If it doesn't, you can take a screen capture of the column, open it in Preview, hit command-i and get the info for that document, including it's width. That's the width you're playing with.

If you're on a Windows machine, go to your local Apple Store and pick up a Mac.

Extra Step 2: View the source code of your movie embed. Do this by again clicking on Edit HTML in the top right corner of the post window. Scroll down and look for code like this:

<object width="425" height="344">

You'll need to change the width and height. If you're like me--mathematically challenged--you may hurt your head trying to do the math. Instead, do this. Create a new image in Photoshop (or other image editing program) that's 425 x 344 and resize it to your width, say 396. That will give you the new correct height as well, in this case 321.

There are TWO places in the embed code that need to be updated. Make sure you make changes to both.

Extra Step 3: Write down the correct width and height somewhere so you don't have to go through this again. Then you'll have a YouTube video perfectly formatted for your blog and your visitors. Enjoy!

Rich Brooks
TypePad Blog Designer

Comments

[Denise aka The Blog Squad]

Excellent post, Rich. However, there's an easier way to find out how wide your content column is.

In your TypePad account, click on Design, then click on Change Theme.

Under "Customize Your Theme" the first section is called General Page Settings. On the right side you will see info about the width of your columns.

Your choices in TypePad are 300, 400, 500 pixels or fluid. If you have your column set to 500 or fluid, you won't have a problem with the default YouTube player width of 425.

If you have 300 or 400, then you will have to edit the width of the player. Since there is a default border I always set to 375 pixels for a 400 px column. I never use a 300 pixel column because I think it's way to narrow and difficult to read the content.

Hope this helps your readers.

Blog on!

[Rich Brooks]

Denise,

Great point. However, there are many TypePad blogs with advanced, custom templates...like ours. I'm not sure if this would work for custom templates.

[Denise aka The Blog Squad]

Ah, Rich, thank you for pointing that out. Probably won't work with advanced templates, but for those of us who customize TypePad templates (not advanced), this will work.

BTW, I do appreciate your blog and writing style very much. I always read your posts.

Blog on!

[Monte]

Well it sounds like you got your answer. It does depend on what template your are using. The settings change with the advanced. Great blog keep it up.

[John Schroeder]

Is there a way to embed two videos beside each other on a post?

[rochambeau]

Thank you for this!
I'm almost there!! Just need to change the height and width!
Constance