Home content top
 
 
 Common Questions 

How do I embed a Video into a page?

It has become more common to see video inserted within a page of text on web sites rather than having to open them in a new window or link to a new page. This enables the video to be viewed without taking the user away from the content of the article or even at the same time as scanning the content.

You can now use the Media Player component to easily embed video into an article or layout template.

If you however need more control over the embedding of your video e.g.you wish to loop the video or hide the video controls then you'll need to edit the source of an article to embed it instead - this allows you to set more parameters.

Only the Flash video format (.flv file) is simple to embed so it works across all browsers on our web sites. We recommend encoding your videos in the Flash format anyway as it works well, is easily cross-browser compliant, and the vast majority of users will already have Flash installed.

You can embed Flash video files (.flv format) that have been uploaded to your web site within a page as follows:
  1. First upload the file to your site in the normal way and publish it. See publishing audio and video recordings for more information on how to publish a recording.
  2. Click on the published recording on the web site to play it in the media pop-up window (your video can be accessed from the Audio/Video homepage e.g.http;//ww.example.com/Media/AllMedia.aspx. Once the window has displayed, move your mouse to the black area below it and right-click on it and select the "view source" option.
  3. In the source code you need to select the code starting below the 'CODE FOR THE FLASH PLAYER' comment. This code will look something like this: 

    <script src="/Common/ThirdParty/swfobject.js" type="text/javascript"></script>
    <p id="EndisFlashPlayer_ctlEndisVideoPlayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
    <script type="text/javascript">
    var s1_ctlEndisVideoPlayer = new SWFObject("/Media/flvplayer.swf","EndisFlashPlayer","450","400","7");
    s1_ctlEndisVideoPlayer.addParam("allowfullscreen","true");
    s1_ctlEndisVideoPlayer.addVariable("file", escape("/Media/PlayMedia.aspx?download=False&media_id=38841&file_id=41605"));
    s1_ctlEndisVideoPlayer.addVariable("type", "video");
    s1_ctlEndisVideoPlayer.addVariable("autostart", "true");
    s1_ctlEndisVideoPlayer.write("EndisFlashPlayer_ctlEndisVideoPlayer");
    </script>
  4. You can add this to the layout of a page in one of two ways - hit the "source" button and paste it into the html source of an article if you're looking to add it to a regular article. Alternatively add an 'Article' component to your layout and use the "html advanced" option to paste the code.
  5. To force your embedded video to display underneath your drop-down navigation menu and login box add this line:
    s1.addParam('wmode', 'opaque');
    Note: it must come before s1_ctlEndisVideoPlayer.write("EndisFlashPlayer_ctlEndisVideoPlayer");
  6. To stop the movie from playing automatically, change the autostart parameter to be false:
    s1.addVariable("autostart", "false");  View other parameters available.
  7. If you want to have an image displayed inside the video player before the movie starts, you need to insert this line, changing the image path to display the image you require:
    s1.addVariable('image','/Images/Content/100/219491.jpg');
    Note 1: It must come before s1_ctlEndisVideoPlayer.write("EndisFlashPlayer_ctlEndisVideoPlayer");
    Note 2: An image location can be obtained by right clicking on it and selecting the properties option.



 Related Articles 
bullet-point