How to Add YouTube Videos To Your Site

You can add YouTube videos in two different ways - using a wizard if you have the latest version of the mantranet engine, or using any of the WYSIWYG text elements in older versions.  The video describes how to use the new wizard.  Both techniques are explained in the text below the video.
 
 

 

Adding YouTube Videos Using the Media Element (preferred)

 
In order to add an existing YouTube video you must do the following:
 
  1. make sure you have a copy of the "embed" code provided by YouTube to allow you to add a video to your website
  2. click on the "settings wizard" button, and then select "yes" to the large files/media option and click submit.
  3. click on the colour wash (or "amend me" button) to edit the element
  4. click the "add new" button to place a YouTube video on the page (you can have more than one video on the page, and you can edit or delete existing videos or large files).  You will be taken to a page where you can choose to add a YouTube video, or select an existing large file from the website.
  5. leave the radio button option on the YouTube option, and paste the embed code into the text area.  Then click the "next" button
  6. enter text in the textfield so that you can identify this video within the administration screens, then click next.
  7. click finish to return to the page amend screen - your video should now have been added to the page.
 


Adding YouTube Videos to a Text Element (Undesirable).

 
If you do not yet have the media element in your site, you can still add YouTube videos.  This technique, however, is much more difficult and error-prone, so please use it only as a temporary measure.  It involves adding a version of the following XHTML to your page:   
 
<object width="425" height="350"> < param name="movie" value="http://www.youtube.com/v/CHvvmfujFAs" /> <embed src="http://www.youtube.com/v/CHvvmfujFAs" type="application/x-shockwave-flash" width="600" height="350"> </embed> <object data="../images/get_flash_player.gif" type="image/gif" width="0" height="0"> <a href="#"> download the flash plugin</a> </object> </object>
 
The procedure is as follows:
 
  1. Upload your video to YouTube (instructions on how to do this are at the youtube website)
  2. Take the embed code provided by YouTube, and paste it into notepad or similar simple text editing tool
  3. Add the following before the opening object tag (<object>): <div class="center">
  4. Add the following after the closing object tag (</object>): </div> 
  5. If you are feeling brave and/or are comfortable with writing html, immediately before the closing object tag (</object>), add in the second object tag in the example above.  This is designed to make your page more accessible (the width and height of 0 are because otherwise, mozilla firefox always displays the image, even when the plugin works).  [ <object data="../images/get_flash_player.gif" type="image/gif" width="0" height="0"> <a href="#"> download the flash plugin</a> </object>]
  6. Copy the resulting code and paste it into the HTML view (bottom left of the tool) of the WYSIWYG tool. 
  7. To assist the visually impaired, you should put a text-based version of the video's content onto the page (such as a transcript or detailed summary) [the content of this video is not relevant for this page, as it is here for illustrative purposes only - otherwise it would be summarised here]. 
WARNING: for some reason, the WYSIWYG tool sometimes removes part of the code if you switch to design mode, or even if you go back to re-edit it.  For that reason, DO NOT USE WYSIWYG DESIGN MODE for this purpose - and if you need to go back in to re-edit, it is strongly recommended that you follow the above steps and replace all the relevant html any time you go back into the WYSIWYG tool for the section that contains the video.

visit www.mantranet.net - the engine behind this website