Add Video to Your Website or Blog -- FAST

In this example, we'll use YouTube to add a video to your website fast.

This section will help you get a video published on your website or blog in five easy steps.

If you're not in as much of a hurry, you might want to look at the overview section that gives you a good high-level summary of the process of adding web video to your website or blog. If you're looking for an alternative to YouTube then go to adding video using a PC or adding video using a Mac

Here is the Video We'll Be Adding

This page will show you how we added the video below to this web page you are reading. I took a quick video of my dog, uploaded the file to YouTube, and then cut and pasted the code into this web page.



Before We Start Assumptions...

Okay, here's our set of assumptions for this quick-and-dirty fast track section:

  • You're willing to use a video hosting service like YouTube, Y, or Z. The upside of using these services is that they simplify and accelerate getting your video up-and-running. The downside is that they promote/advertise their services in the process -- on your website or blog. If cross-branding doesn't bother you, keep reading down this page. If it does bother you, and you want to publish video without the video hosting branding, go here and here.
  • Your video file is already on your computer. If not, go to the pc video section or mac video section to figure out how to move your video from your camera to your computer page.
  • The video file is ready to publish, in other words, there is no need for further editing (picture and sound are fine) for now and you're okay with the entire world being able to see it. If not, go to the video editing on a pc or video editing on a mac page.
  • The video is either in avi format (most likely format if you've downloaded it from a digital camera) or flv format. If not, or you don't know, go to the pc video conversion page or the mac video conversion page.
  • You have access to the web page you're trying to put the video on, or you have someone that can help you with access to it.

Easy-to-Follow Example

For this example, I took a short 3-second video of my dog using a digital camera. I moved the file from my camera to my computer (Windows PC) using a USB Cable. Now, I want to upload the video to this web page you are reading. I'll add it to the bottom of the page. I'm going to use a web video sharing service (YouTube) to get this done. Everything in between this sentence and the end of this page will explain how to do it. If you're looking for a solution that does not involve a web hosting service go to the add video using a pc or add video using a mac sections.

Step 1: Locate Your Video File on Your Computer

Let's start by locating the video file you want to publish to your website -- finding it on your pc or your mac. The file will look something like the image to the right. In this example, I have a thumbnail view of an 882KB avi video file named "dog-yawn". It's located in a folder that I created on my windows PC called "video-to-upload" which is on the top level of my c: hard drive.

Step 2: Sign Up for a Video Hosting Service

For this example we're going to use YouTube. There are lots of different video hosting services. If you want a overview of some of the more popular web video hosting providers you can go here.

  • Go to: http:www.youtube.com to sign-up for an account. If you are already a member of YouTube, you can skip to the next step.
  • Fill in the YouTube Sign-Up form (pictured below) and input your email, a password, a username, location, postal code, date of birth, gender, and verification. Check whether you want others to be able to find your videos using your email and if you agree to the YouTube Terms of Use and Privacy Policy.

  • After you've filled out the form, click the "Create my account" button.
  • The next page will welcome you to YouTube (see illustration below) and ask you to check your email to confirm your account.
  • Go check your email for the YouTube confirmation. Open the email and click the "Confirm your email address" link in the email message.

Step 3: Upload Your Video to the Hosting Service

sdfasd

  • You'll be taken back to YouTube and there will now be a green bar that says "Your email has been confirmed". Also, now you will have a yellow box on the right hand side that says "Upload". Move your cursor over the upload box and click on "Video File" option-- see figure below.



  • You are now presented with an opportunity to browse your computer for the video you want to upload. Click on the browse button.



  • This will open a new dialog box on your comptuter allowing you to find the file you want to upload. Browse over to the original video file you located in step 1. Select the file and click the "Open" button.



  • You'll be returned to the YouTube Video File Upload page. Now click on the "Upload Video" button.



  • You'll now have the opportunity to provide a title, description, tags, category, and sharing instructions for your video. These are all optional.



  • You'll now be taken to the My Videos page. Click on the title of the video to go to the YouTube page where the video is published.



Step 4: Copy the Embed Code

On the YouTube page where the video is published, find the embed code on the right hand side -- marked by the red arrow in the figure below. This is html code, automatically generated by YouTube, that is what you use to call the video to your web page. You need to copy this code and find a place on the web page to insert it.

  • Here is where you find the script of the code.



  • Copy the information in this box. This is the html script that you will now "paste" into your web page.



Step 5: Integrate the Embed Code Into Your Target Web Page

Here is what the code looks like:

youtube script

You can see how this code fits into the page your are reading now by looking at the page source of this web page. In your browser (Internet Explorer, Firefox, Safari, etc.) go to View --> Page Source and then you can examine how this script fits into the top and the bottom of the page.

Here is the process for adding it:

  • Download a local copy of your web page from your web server.
  • Paste the above code where you want it to appear on the page. Save the new version of the page.
  • Upload the new page back to your web server.

The Finished Video On Your Page

And finally, here is the finished video. Please send feedback here if there are parts of this description that are still confusing to you.

Note: this video contains branding that promotes YouTube. If you would like to learn how to embed videos without using YouTube, go to add video using a PC or add video using a Mac.