How to Add YouTube Videos to Your TypePad Blog

  • 0 [T] | 0 [FB] | 0 [+1] | 0 [LI] | 0 [PT]
    http://www.flyteblog.com/flyte/2008/06/how-to-add-yout.html
    0 SHARES

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.

Embed

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

Edithtml

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:

Toowide

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

  • http://www.buildabetterblog.com 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!

  • http://www.buildabetterblog.com 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!

  • http://www.buildabetterblog.com 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!

  • http://www.flyteblog.com 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.

  • http://www.flyteblog.com 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.

  • http://www.buildabetterblog.com 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!

  • http://www.buildabetterblog.com 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!

  • http://www.buildabetterblog.com 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!

  • http://directhomefind.com/california/burbank/ 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.

  • http://directhomefind.com/california/burbank/ 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.

  • http://directhomefind.com/california/burbank/ 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.

  • http://www.MadisonRealEstateShow.com John Schroeder

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

  • http://www.MadisonRealEstateShow.com John Schroeder

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

  • http://www.MadisonRealEstateShow.com John Schroeder

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

  • http://rochambeau.typepad.com rochambeau

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

  • http://rochambeau.typepad.com rochambeau

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

  • http://rochambeau.typepad.com rochambeau

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

  • [spammy name deleted]

    Great point. However, there are many TypePad blogs with advanced, custom templates…like ours.Great blog,keep it up.

  • [spammy name deleted]

    Great point. However, there are many TypePad blogs with advanced, custom templates…like ours.Great blog,keep it up.

  • [spammy name deleted]

    Great point. However, there are many TypePad blogs with advanced, custom templates…like ours.Great blog,keep it up.

  • http://www.hototc.com/ penny stocks

    That's awesome nice post.I tend to agree.Having a business blog hosted in the website does help in getting good back links.

  • http://www.hototc.com/ penny stocks

    That's awesome nice post.I tend to agree.Having a business blog hosted in the website does help in getting good back links.

  • http://www.hototc.com/ penny stocks

    That's awesome nice post.I tend to agree.Having a business blog hosted in the website does help in getting good back links.

  • jagulei120

    That’s awesome nice post.

  • http://www.myoptimind.com/web-design-and-web-development.html Jade

    Wow,nice post! At least i have my idea now how to put a you tube in my typepad blog..Is that compatible for all videos?

  • http://twitter.com/therichbrooks therichbrooks

    Jade, It should work for all videos that come w/an embed code.

  • Stcsaopaulo

    Excellent post, I liked a lot. Success!

  • Y Aazib

    This is a useful tip, I was searching on facebook and I find it. Thank You.

  • http://1seocompany.com.au/search-engine-optimisation-services-seo Web Design Company

    Totally ,I am appreciate with these blog. It is nice and new of thinking better ideas.

  • http://1seocompany.com.au/web-development/ Dktpromo

    I am so impress to read these blog and give wide way for improving the ranking of your website.It can also give some alternatives for the improvement the business.

  • Pingback: Penny Stocks To Buy 2011 | Stocks To Watch()

  • http://www.sherwinhermogenes.com/ Web Design Philippines

    Thanks for sharing this tips

  • Pingback: Penny Stocks To Buy 2011 | Top Biotech Stocks()

  • http://www.vinfotech.com/solutions/social-network-design.htm SamDaniel

    This is good to know and I will definitely give it a try. It will be more learning for me.

  • http://pimpmyviews.com/ Increase Youtube Views

    Thanks for the tips that you give us. Those can really be effective if we use it properly. Especially in getting a good rank page at Google.

  • Pingback: Tradingstar301.livejournal.com()