Embedding Video in Your Website

So you've seen some of those cool little videos people put on their webpages, and you'd like to do one yourself.  Creating videos keeps getting easier with tools like Animoto, but getting that awesome video onto your website can be a little tricky.

Getting Embed Code (What is Embed Code!?)
Embed code is HTML code that tells your webpage to place an object in the middle of the page, or embed it.  Most video websites provide easy access to this.  For example in Youtube, there is a gray box to the left of the video that contains both the URL (for making a hyperlink) and the embed code.  In an Animoto video, click on "Share This Video" to bring up the embed code.  Other video websites are similar.  Once you have this code, copy it onto your clipboard (Right-click->Copy or Ctrl+c) but keep the webpage open so you can refer back to it.

Embedding in Web-based Website Creators
Most of the web-based website creators like EducatorPages or Google Sites manage the majority of the formatting of your page for you.  You edit certain portions of the webpage separetely, so you never see all of the HTML code at once.  This makes pasting in embed code a little easier.  When you are editing the part of your webpage where you would like the video you should see a toolbar at the top that contains something similar to the following:

The blue arrow is pointing to the HTML button.  Clicking this will allow you to edit the HTML code for the portion of the webpage you are working on.  Paste in the code (Right-click->Paste or Ctrl+V) where you would like the video to be and then return to the regular design view.  Your video is now embedded and will show up when people view your completed website.

Embedding in Frontpage

The most straightforward way to embed a video into Frontpage is to switch to the "Code" view at the bottom of the screen and then paste the embed code into the page.  Wherever the cursor was located while you were in design view will be where it is located in Code view, so you can find your place in the page that way.  If you don't like messing with the screen full of code, here's another option.

Click Insert -> Web Component

This will open up the Web Component dialog box.  From here, select Advanced Controls (scroll to the bottom) and then select HTML in the box on the right.  Then click Finish.

This will bring up the HTML Markup dialog box.  Paste your embed code into the large white box and click ok.


Initially your video won't look like much in design view, you'll see a small box with a question mark.  However if you click "Preview" mode on the bottom of the screen, you will get a preview of what the video will actually look like.

I hope you find these tips useful!  A short video can do a lot to spice up a website, and once you have embedded one, the process becomes much more familiar.  Have fun!