How do I add video to my content areas?

There are several ways that you can work with video in the CMS.

Embedding Quicktime, Windows Media or Flash Video files

The easiest way is to embed video into a page is to use the built in options provided in the content editor. To do this:

  • Upload your video file to the video asset library. You can access the video asset library by going to Manage Content > Assets > Video. The CMS currently accepts Windows Media, Quicktime and Flash video formats.
  • Once you've uploaded your video file(s), go to the page in your site where you would like to place the video in Preview Editing mode and click on the appropriate Edit Content link to open up the content editor.
  • With the content editor window open, simply place your cursor where you would like to insert the video and then click on the insert/edit embedded media icon (it looks like a small film strip and is located on the bottom icon menu, fourth from the right hand side).
  • After you have the insert media dialog box opened up, you can select the type of video file that you are going to insert, the video file that you would like to embed (the list selection box will show you all the videos that you've uploaded to the CMS) and the size of the video as it should appear on your page.
  • Click insert and then save, and you're done!

Advanced techniques for Flash videos

For those users or clients who are more advanced and would like more control on how a flash video is embedded on a site, we reccomend using SWFObject. SWFObject is a cool JavaScript library that makes adding Flash content to websites easy and robust. You will need to complete four steps to get this working.

  • Download SWFObject and extract swfobject.js from the zip file.
  • Upload swfobject.js to your Design Theme. You can add new JS files by navigating to Administration > Design Themes and opening your Design Theme. On the Theme Files page click "Add New..."
  • Place an alternative content div in your content area. The alternative content will be replaced with the flash video. This will replace the current embed code. See code example 1 below.
  • Edit the Page Properties of the page your video will live on and paste the code below into the "Javascript <head> code" field. Page Properties can be found by opening the page you are working on in Preview Mode and clicking the yellow icon with the check mark toward the top right side of the page. See code example 2 below.

Here is the alternative content div that belongs in the content area:

<div id="myContent"><p>You need flash to see this video.</p></div>

Here is the SWFObject code that belongs in the "Javascript <head> code" field:

<script type="text/javascript" src="cmsjs/swfobject.js"></script>

<script type="text/javascript">

var flashvars = {};
var params = {
allowfullscreen: "true",
allowscriptaccess: "always"
};
var attributes = {
id: "VideoPlayback"
};
swfobject.embedSWF("http://video.google.com/googleplayer.swf?docid=3093173030933841909&hl=en&fs=true", "myContent", "400", "326", "9.0.0", "", flashvars, params, attributes);

</script>

You can get more info by checking out the SWFObject Documentation on Google Code.