There are two two ways to include audio or video clips on your website: storing the media on the StevesIdeas servers, or using a link to media that's stored elsewhere – Youtube®, for example.
First, let me tell you the pros and cons of Youtube video. On the plus side, there doesn't appear to be a limit to how much video you can store on Youtube's servers – and it's free. I'm sure there's a limit to each clip's length, but it appears that you can store as many clips as you want to upload. And Youtube video plays through an embedded Flash® player, so virtually any PC can be used to view the clips (in fact, the ONLY way you can view a Youtube video is to use Youtube's player).
On the downside, it's a standard of web marketing that you never want your visitors to leave your site once they land there. Providing them a link to information on another site effectively takes them away from your site, possibly never to return. In the case of your blog, this isn't so much a problem, because there are few navigational controls on most blogging sites that would entice your visitors to just stay there once they've finished reading your content.
But Youtube is an entirely different story. I'm sure you, like me, have received a link to a video on Youtube in an email from a friend, and after you finish watching the clip, you happen to see another clip that looks interesting. And you end up spending the rest of the night perusing video clips that have nothing to do with the clip that drew you to the site. Oh... you haven't done that? Yeah, right...
Anyway, having your own website gives you a real benefit when it comes to displaying You-tube video: your visitors don't have to navigate away from your site to view a clip – they can view it right on a page within your site! And fortunately, StevesIdeas makes it very easy to embed a Youtube video.
For an example of several ways to display video and audio on your website, go to www.ScarlettMcAlister.com (my daughter Scarlett's site). You'll see that there's a main page called “Media” and that there are three sub-pages. Two of three of those pages are audio/video page types (two audio clips and one video clip). These are the actor's voiceover and video demo reels, and they're stored on the actor's website (in the Audio/Video Drawer). This is important, since you always want your visitors to be able to view and hear those particular clips, so you don't want to trust an external source to host them. But notice that there's a fourth page “Commercials, Behind the Scenes and Fun Videos.”
Some of these clips are hosted on external servers (like Youtube) because they're not critically important. The “Commercials, Behind the Scenes...” page isn't an audio/video page, by the way, it's simply a “Section with Multiple Sub-sections” page type.
So however you decide to lay out your page hierarchy, the page you'll use for embedded Youtube video will be a “Single page” page type. Let's set up a page and see what you need to do.
Most of you have a tab on your website labeled “Video,” even though you may not have up-loaded anything to the page yet. If you haven't changed it, that page is an audio/video page, so we can't use it for our embedded Youtube video. So let's create a new “page hierarchy” so you can see how that would work.
We're going to set up a “Media” page with multiple sub-pages, one for each audio or video clip. Page 1 will be a Windows Media (.wmv) clip that we upload to the server, Page 2 will be an embedded Youtube video, and Page 3 will be a link to a Youtube video.
First, go into the Administrator's Control Panel and click on MAIN LINKS. The upper portion of the page is where you can add a page (the existing pages are shown below). Give your new page a name (“MEDIA”) and change the Page Type to Section with Multiple Sub-pages. You probably don't want any sidebar modules on this page; in fact, most people place sidebar modules on their home page only. Select where you want the tab for the new page to be placed. In our example, we'll select “Put Last on List.”
Click “Save Page” and your new “MEDIA” page will appear in the list of pages under “MAIN LINKS.”
Now click on “MEDIA” under MAIN LINKS to bring up the new page. This may be a bit confusing, but the top portion of the page is where you can add a new sub-page; the bottom part of the page is where you can change the optional settings for MEDIA (the “main” page).
For now, we'll be working with the top part of the page, to add some sub-pages. Enter the Page Title for the first sub-page (in our example, “Page 1” and select a Page Type of “AUDIO/VIDEO.” Again, You probably won't want any sidebar modules. Click “Save Page” (not “Save Settings” - that button is for when you change the optional settings for the main page.)
You'll now see “Page 1” as a sub-page under MEDIA in the Main Links section.
For our embedded Youtube video, we'll create “Page 2” as a “single page” Page type.
Save the page, and finally, create “Page 3” as an “External Link” Page Type.
OK, now we're (finally!) ready to add content to our new video pages. Let's start with Page 1, the video that will be stored on our website server. This clip should be of one of the following types:
• Windows Media (.wmv)
• Audio/Video Interleaved (.avi)
• Apple Quicktime® (.qt or .mov)
• Adobe Flash® (.flv)
• Motion Picture Experts Group (.mpg)
You can use some other formats, but it's not advisable, because your viewers may not have the ability to play them. The best format to use is Windows Media, because the file sizes are smaller and the quality is very good. There are Windows Media Players and plug-ins for not only Windows computers, but for Linux and Apple computers as well, so the format is fairly standard. .avi files are usually not used on the web because of their size, and Flash movies (that's the format that Youtube uses) won't allow your visitors to download and play the video offline unless they have some fairly obscure software. MPG is very good quality, but often very large file sizes. Quicktime movies are very good, but Windows users may not have soft-ware to edit their video into that format; moreover, Quicktime files are often very large – recently I converted a 220mb Quicktime video to a 20mb Windows Media file with no apparent loss in quality.
Let's use a Windows Media (.wmv) file for Page 1. First, we'll need to upload the video to the Audio/Video Drawer. Click on “Audio/Video Drawer” in the File Cabinet section of your control panel. [Note: the Audio/Video Drawer requires Java Runtime in order to function. If your computer doesn't have Java, there will be a link at the top of the page to allow you to download it directly from Sun Microsystems. Java Runtime is free.]
Click the “BROWSE” button and select the video from your computer, then click “UPLOAD” and the video will be transferred to your website, and you'll now see it listed in the bot-tom portion of the Audio/Video Drawer page.
As you can see from the example, the 2-minute demo video we uploaded is only 4.15mb (you have a total of 100mb available on your web-site) so you could have several videos uploaded before exceeding your disk limit.
OK, now that the video is in the Audio/Video Drawer, let's add it to Page 1. Click “Page 1” under “MEDIA” in the PAGES section. At the top of the “PAGE 1” page, you'll see a drop-down menu where you can pick the media that you want to appear on this page. We only have one file in the Audio/Video Drawer, but if you'd uploaded more media, it would appear in that drop-down menu as well.
Click “Update Audio/Video” to save your changes.
Now, let's create Page 2, the page with an em-bedded Youtube video. First, go to Youtube and find the video you want to embed. In this case, I'll use Scarlett's DirecTV commercial.
Note the box at the right side of the screen labeled “Embed” - that's the code that we want to use in our web page, so simply highlight the code by clicking somewhere inside that box (all the data should be highlighted now). Then RIGHT-click in the box and pick “Copy” from the drop-down menu.
Now, click on “Page 2” under MEDIA in your control panel. There's nothing on the page yet, so you won't see much. Click on the button labeled “SOURCE” in the mini-word processor section of the window (this will grey-out all the other word processing icons). Now right-click anywhere in the large empty box and select “PASTE.” All the code that you copied from Youtube will be pasted into the window.
Click SOURCE again and all that stuff will disappear. You probably want your video centered, so click the icon above the window that indicates centered text.
Now click “UPDATE PAGE.” You won't see anything in the text window, because all that's there is code – but trust me, it's there. You've now embedded a Youtube video into a web page on your site.
Finally, let's add a page where we link to a video that's stored on a server somewhere other than your own. Click on “Page 3” in the “PAGES” section and you'll see a box where you can enter a url/web address. Either type in the url of the page that you want to link to, or copy it from the address bar in your browser (if you're using Firefox or Internet Explorer 7, you can open a new tab and find the web page in that tab, copy it and go back to the tab where you're working on your website).
I'm using a video clip that's stored on my StevesIdeas.com website:
Click “Update external link” and your page will be saved.
So now we have three pages for video, all sub-pages of a main page titled “MEDIA.” Let's see how each of these pages performs. First, here's Page 1, the page with video that we've uploaded to our website:
As you can see, the page will present the viewer with a media player that will allow him to pause, back up and skip forward. The visitor can also click the link above the player to download the video for offline viewing if desired.
Page 2, the page with the embedded Youtube video, looks a bit different:
And finally, here's what Page 3 looks like (that's the page with the link to an external video file)
I captured a full-screen version of Page 3 so you could see that the video doesn't play “in” the website, but is opened in an external player. In this case, my system is set up to use Windows Media Player for most video files, so a new window with WMP was opened. (By the way, that's a night scene in Red Square in Moscow, so it's a little hard to see in a screen capture).
Audio files can be handled just as video files are – play around with this feature and find the way YOU want to handle your video!