About Blogging – Embedding Video, Music and Slideshows In A Blog

Due to the excitement over our new series About Blogging, we have decided to have the column run every other Monday, instead of just once a month.

Our first guest contributor, who will be a regular here for our About Blogging series, is Jim Durbin of Durbin Media. Jim is an expert blog consultant with a wealth of information and we are thrilled to have him writing for us. You can find him at his blog Brandstorming and at www.durbinmedia.com.

We will still have other guest contributors posting for this series as well – so if you are interested in contributing you can email me at janice @ 5minutesformom.com.

If you have specific topics or questions you would like addressed in future About Blogging posts, send them over! You can reach me at janice @ 5minutesformom.com (remove spaces.)

Embedding Video, Music and Slideshows In A Blog

A Guest Post by Jim Durbin of Storkcalling and Durbin Media.

You’ve seen them. Those cool bloggers with their oh so trendy multimedia presentations. Their commercials of your favorite products – the ones you talk about in sparkling prose, but just not the same as the flashing lights, colors, and sounds of moving pictures. They show off slideshows of their kids, or put mp3’s into a blog post on our their MySpace page, while you’re stuck with a line that says “put links here.”

If you’ve ever been that person whose suffered from blog jealousy, help is on the way. Today we’re going to talk about some simple ways to embed video, songs, and slideshows into your blog to show your friends and family that you too have entered the YouTube age.

The first thing to recognize is that you are uploading a file to the blog, much the same way you are uploading a picture or a document. If you want to play music or home movies on your blog, you’ll have to know how to upload these from your computer into your blog software. That’s a bit difficult to explain, because everyone has different computers, different operating systems, and different video files. What we’ll cover is how to embed videos, music, and slideshows that are already created. The process is always the same. You take a line of code marked “embed,” and post it to your blog in the Edit HTML file of your blogging software.

Let’s actually walk through it. Go to YouTube. We’re going to find a video on the site and embed it in a blog post


Step 1:
Search for the video for your site typing in pampers and babies in the tags. The fourth video down is Pampers Peace On Earth. That’s the one you want. Click on it.

Step 2:

Look to the right of the video for the embed code. If you just want the link, copy the link and put it into your post like you would any hyperlink. If you want to embed the video, select the embed code, in this case;

Copy This code (control-c, or apple-c), you’re going to take back to your site. Make sure you have the complete code.

Step 3:
Login to your blogging software. It does not matter if it’s Typepad, WordPress or Blogger. Write a post, describing what you are about to play for video. Be descriptive, and remember that videos that do not have descriptions do not get viewed, and Google can’t read them. So in this case, write about how much you love the pampers peace on earth commercial.

Step 4:

When you are completely finished writing the post, and I mean completely, look to the tabs in your software that say Compose (Post), and Edit HTML. In Blogger, it just says compose – in Typepad it says Compose Post. Click on the Edit HTML tab. This will change the text on your screen to html, which allows you to paste the embed code from YouTube.

Figure out where you want to place the video in your post (on top, in the middle, at the bottom), and clear a space for it using the return key. Make sure there is at least one space before and after the embed code. The embed code should be it’s own paragraph, and you don’t want to make changes after you have pasted the code. So clear a space, hitting the return key a few times, and then paste the embed code into the the blog post.

Step 5:
Save the post, and you’re done. Remember to preview.

This may seem elaborate, but following these instructions is the cleanest way to make sure your video works. What is happening is the Compose Post tab of your blogging software is called a WYSIWYG editor. (WYSIWYG stands for “what you see is what you get.”) Basically, it allows people to write posts without knowing HTML. The WYSIWYG editor can’t handle video code, so it tries to change it into something recognizable. That change ruins the code, so you have to go to the edit HTML tab to paste the code correctly.

The reason for the spacing is simple. Most people accidentally delete portions of the code when making changes. If you have it in a separate paragraph, you can see if you have made those mistakes, and simply copy and repaste to solve the problem.

(Advanced Tip: If you have a smaller column like here at 5 Minutes for Mom, you will need to change the object width in the code to keep from making your column too wide. So where it says width=”425″, you simply change the width from “425” to “380” or whatever pixel size will fit in your column. This width will be listed twice in the code, so make sure you change it both times.)

Songs and SlideShows

The process for adding Slideshows and Music is the same.

You’re looking for an embed code in another software, and you add it to the site in the same manner. The best way to get that code, is to join an application like Flickr, Slideroll, or Sonific, and upload your mp3 or photos into those applications. They automatically do what is very complex to do on your own, namely building slideshows and music players on your desktop.

Join those applications, upload the songs and photos from your desktop, and then look for the embed code the site generates to put into your blogpost.

Other links:
help for Flickr
Sonific songs Supported Sites
help for Flikr Slideshows
Slideroll Slideshow FAQ
Answers MP3
Macloo Audio

Remember to join us in two weeks, for another installment of About Blogging.


  1. says

    How helpful!! I hope this gives your readers the confidence to do some more media-rich options with their blogs. I just posted three of our band’s songs on mine just today. What a bit of serendipity to find this!

  2. says

    So helpful! I might still need Hubbie to help, but I can’t wait to try! I have definintely been one of those ppl jealous of other’s myspace pages, blogs, etc…. Thanks!

  3. says

    Thank you for the information on how to change the width in the column. You can’t believe how many times I’ve thrown my whole sidebar out of whack because I didn’t know how to make it more narrow without completely messing up the html code.

    This is great. You girls are so busy over here, I can’t keep up with you!

  4. says

    Great tips! I love putting extras on my blog. I hadn’t tried music or video yet, so I’m looking forward to adding some soon :).

  5. says

    When putting any of these things into your blog, make sure you have the line of code that says AUTOSTART set to “NO”.
    If it is set to yes, then while your readers are trying to load your page to read your blog, they’re having to wait for that 3-meg video to load up.
    That slows you down, turns off your readers, and before you know it, they’re gone – off to find another blog that’s easier to read.

    Also one of the worst things you can do on your blog is use one of those little music players that everyone seems to be slapping into their sidebars now, and making music auto-play.

    Understand this – your readers are not you. They may not like the music that you like. They may be reading the blog after the kids are asleep and they don’t *want* any music to suddenly and unexpectedly come blaring out of the speakers to wake up the kids. And they certainly don’t want to be FORCED to wait for a download of a song (or video, or slideshow) that they did not CHOOSE to view/hear.

    Always give your visitors the CHOICE of starting an audio/video presentation. Tell them what it’s about, and if they’re interested, they’ll click the “Play” button themselves.

    Blogs with all of their fancy graphics and photo-heavy layouts have gotten bad enough on the bandwidth-loading issue these days without adding videos, slideshows, and music that autoplays getting added to the mix.

  6. says

    Great tips – as always! Though I agree with Carrie about not making it start automatically, that sometimes drives me NUTS! :)

    What about an article on which blog TYPE to choose, wordpress, blogger, typepad ect – there are soo many and frankly I had no idea when I started mine – now I am moving TO blogger and it’s gonna take a while – since I am sick thats TOTALLY not helping :(

  7. says

    It worked!! This is incredibly valuable information. Jim Durbin is awesome! I speak from personal experience and he is a great teacher and good friend. Be sure to check out his website and send him an e-mail to say hi! He also offers blogging bootcamp which is a great training course to get you started blogging. I took the course and hope to know more than him someday!

  8. says

    I bookmarked this post a while back and finally used it tonight to insert that super-cute Paolo Nutini and his “New Shoes” video into my blog. I have a ton of new visitors this week and wanted a fun way to welcome them, as well as encourage them to stick around and read for a bit. It couldn’t have been easier. Thanks for the tips!

  9. Elly says

    Hello, I use Livejournal and I’m completely clueless on how to upload music. I have my own songs on my desktop and I was wondering how I would upload those songs?

  10. Monika says

    did step by step instruction given in Embedding Video, Music and Slideshows In A Blog but when i do preview i see only text not video. Can you please help me with this. I will appreciate that so much. I did installed Adobe flash shockwave player. And video i m trying to embed is from kyte website and i did cut and paste of the embed code in the html editor as said in your blog but after preview see only text dont see any vide. Please help me what step i m missing here.

  11. says

    I want music with an ON/Off music button, but I hate the gaudy visible players..It seems for the embedded music you have to advertise the player site as well..
    Any one have how to; for invisible player – only need one background tune (celtic)for the blog..
    thanks for being helpful to all !

  12. says

    They own the data and the customer relationship
    totally. red to successfully not can that an afternoon liberate and classic ugly as more time for quantities in which way.
    Times changed and later, marriage became a stable institution that, once entered into, could not be broken up
    or dissolved but by the demise of one of the spouses.

  13. says

    Buenas!! he estado leyendo al menos unas 4 horas en las webs hoy y
    no he visto nada tan increible como tu Redaccion. Me ha entretenido mucho la manera que posees al escribir supongo que es lo que me ha llegado.
    En mi opinion, si la mayor parte de los propietarios de webs exponen esta calidad en los contenidos, Internet seria mucho mas practico.
    Espero que sigas por esta linea y pueda seguir comentando relatos de la fuerza que tiene este.

  14. says

    What’s Taking place i am new to this, I
    stumbled upon this I have discovered It absolutely helpful and
    it has aided me out loads. I hope to give a contribution & assist other customers like its helped me.
    Good job.

  15. says

    Hi! Quick question that’s completely off topic. Do you know how to make your site mobile friendly?
    My website looks weird when browsing from my apple iphone.
    I’m trying to find a theme or plugin that might be able to correct this issue.

    If you have any suggestions, please share.

Leave a Reply

Your email address will not be published. Required fields are marked *