Embedding Video in your Microsoft FrontPage Website

One of the most common tasks clients ask me for help with is how to paste Youtube or Google video into their Microsoft FrontPage website. It’s really a snap to embed videos but there are a couple of foundation principles you must know to do it.

You’ll need to know how to use your clipboard to select, copy, and paste. You will need to be able to look at, copy, and insert (paste) html code into your page HTML. Now don’t get nervous…HTML is just some formatting that makes the page appear in your visitors browser. Normally FrontPage isolates you from working in HTML. But this is going to be easy, so follow along. Let’s get started!

The best way is to start a new page for this to practice on so you don’t mess up a working page while practicing. So open up FrontPage and make a new page in your site.

Notice in FrontPage at the bottom of the page editing window there are tabs for Normal, HTML, and Preview. If you click the HTML tab it will show you the HTML code of the current file. So if you started a video.htm page for example you can look at the code of that page. Now go back to normal view and put some text on the page. Just write a couple sentences, then go back to HTML view and see the changes. Now minimize FrontPage and go to your Web Browser.

Now go to YouTube or Google Video and locate the first video you want to embed. Both sites have embed code they create for you on the video page. Find the video you want to embed. Locate the the embed code on the video page and select and copy it to your clipboard. Then go to FrontPage and look at the html code of your page again. This is where you’re going to ‘paste’ this embed code. (Please note that some publishers block embedding so if you can’t find the embed code try a different video.)

Switch to normal view and locate the spot where you want the video to appear. Put your cursor there. You may need to hit a carriage return to put the cursor where you want it below the text. Once the cursor is there, hit the SPACE bar a couple time to make a couple blank spaces on the page. Then select these blank space with your mouse, or you can hold your SHIFT key down and hit your left arrow key to select the blank space. Either way, all you need to do is highlight the space. (This is basically creating a bookmark in the page you can see in the code.)

Now switch to HTML view and you’ll see the highlighted section that corresponds with the selection you just made in normal mode. Now if you followed the steps so far you should still have the video embed code in your clipboard so you can ‘Paste” the code into the html area where the highlighted spaces are. (A quick shortcut is just to hit CTRL+V on your keyboard to paste the contents of the clipboard. This should insert the code into the page for you.

Now go back to normal to keep working or save the page and use Preview to see how it looks with the video. Once you do this a few times, you’ll be a pro at it so have fun and start embedding video!

…