How To Insert Videos on a Page

Basic Procedure

• Load any videos to the Media Library.
• Insert links to videos on pages
• Use the HTML view in the editor to alter the link slightly by typing additional information
• Publish.

Items in Detail

1. Media Library

• Loading new content is described in Sitecore Cheat Sheet 1.
• SWF, FLV, MOV formats are supported
• Store video files in Media Library/Files/YOURSITE/YOURFOLDER/etc...

2. Insert Links to Videos

• In the Content Editor interface, open an item and edit the Body field
• Put your cursor wherever you would want the video to end up.
• Use the "InsertSitecoreLink" tool:
   
• In the popup window, navigate to your video file in the Media Library.
• When you are finished , you should see an ordinary blue underlined link to your video.

3. Modify the Video Link Manually

• Open the HTML tab in the lower left corner of the editor window.
• Edit the URL of the video to end with "?ext=.flv" (or .swf or .mov as appropriate) Example:
  • Original: <a href="~/media/5E70EB51F1AF0A10E69956DA.ashx">
  • Modified: <a href="~/media/5E70EB51F1AF0A10E69956DA.ashx?ext=.flv">
• Edit the <a> tag further to include class information exactly like this:
  • <a class="mediaPlayer" href="~/media/5E70EB51F1AF0A10E69956DA.ashx?ext=.flv">
• Optional width and height of the player may be added using this syntax:
  • <a class="mediaPlayer {width:200, height:300}" href="~/media/5E7etc...
• The link text (the stuff between the <a> and </a> tags) will become the caption to the video. Remove the text if you do not want a caption. Example for NO CAPTION:
  • <a class="mediaPlayer" href="~/media/5E70EB51F1AF0A10E69956DA.ashx?ext=.flv"></a>
• Extra positioning should happen in an external div, for example
  • <div style="float:right">
      <a class="mediaPlayer" href="~/media/5E7...">Caption</a>
    </div>
• Click the "Accept" button, then Save, Preview, and Publish.

Last Modified: 5/15/09 dmt34