Tips & Tricks: Host Videos On Your Site


Wednesday, June 6, 2007  

UPDATE: The recent editor upgrade includes a new "Insert/edit Embedded Media" toolbar button to make this process much simpler. See Inserting Multimedia in the online help for more details. However, if you are having trouble getting your media to work with the Insert Media button, these instructions might help...

Many customers have asked how they can display video content on their EditMe site. This Tip of the Week covers a few different options for hosting local video and streaming remotely hosted video on your site.

Hosting local video involves uploading a video file to your site as an attachment and then using the EMBED tag to show the video in a page. Because the EMBED tag doesn't agree with EditMe's editor, it must be inserted using a Plain Text page and then included in a page edited with the normal editor. Here's how:

Step 1: Upload a Video

We'll assume you already have a video you want to include on your site. (If you want to include a streamed video from a service like YouTube, see below). Your video can be any of a variety of formats, including .AVI, .MOV or .RM. You'll want to make the file name short and simple as you'll be typing it in later on.

  1. Create a new page on your site called MyVideo (or whatever you like).
  2. View that page and click the Attachments link in the Tools menu.
  3. Upload your file. You may want to select the "Hide" checkbox so your video won't be listed on the page.

Now you have a page called MyVideo with an attached video. For the sake of example, we'll assume your video's file name was "myvideo.avi".

Step 2: Embed the Video

Next, we'll use the EMBED tag to display the video on this page. Note that we'll just show the video and nothing else on this page. That will allow us to include the video anywhere else on the site using a simple [[include]] tag.

  1. Edit the MyVideo page you just created.
  2. Click the Page Properties button at the bottom of the editing screen.
  3. Mark the "Edit This Page in Plain Text" checkbox and click Save. The page will reload and the editor will be replaced with a plain text box.
  4. Enter the following into the text box and click Save:
<embed height="300" width="300" src="/files/MyVideo/myvideo.avi" controller="true" autoplay="false"> 

You'll probably want to change a few values in the EMBED tag. You can experiment with the HEIGHT and WIDTH values to show the video at the appropriate size. The SRC value should be modified to include the name of the page you created if it wasn't MyVideo, and to indicate the correct video file name, if it wasn't myvideo.avi. The CONTROLLER value can be "true" or "false" and indicates whether the video player will have play, pause, stop and other controls. The AUTOPLAY value indicates whether the video should start playing automatically.

Step 3: Include Your Video

You now have a page called MyVideo that shows your video! You can include this page anywhere on your site by entering [[include:MyVideo]] into the EditMe editor.

It's important to understand that this method of including video requires visitors to your site to have their browsers configured correctly to play the video format you've uploaded. You'll want to test your video from the types of browsers you expect your visitors will be using. For example, not all Windows users have QuickTime installed, so .MOV files may not show for some users.

Showing a Video from YouTube, Etc.

If you want to show a video that is already hosted somewhere else, you can do that, too. These examples are for YouTube, but will work for just about any video hosting service.

  1. Find the video you want to show on your site at YouTube.
  2. Copy the contents of the "Embed" text box displayed to the right of the video on YouTube.
  3. Create a new page on your site called MyVideo. When editing the page, click Page Properties, mark the "Edit this page in Plain Text" checkbox and click Save.
  4. Paste the content you copied from the "Embed" text box into your plain text EditMe page and click save.
  5. You can now include that page in any normal EditMe page by typing [[include:MyVideo]] into the EditMe editor.

Here's the old "Dancing Baby" video, hosted at YouTube:

 

Stay Connected with EditMe

Subscribe via Email

Your Email:

Delivered by FeedBurner