Inserting Videos

 
All videos added to the website should be YouTube embedded videos.  Contact Andy Tincknell in CTELT to get a promotional video made, or to add an existing video to YouTube.  Andy will provide the embed code needed to add the video to your web page.

If you already have a video posted to YouTube, you can find the embed code on the video's page.

  1. Click on Share
  2. Click Embed
  3. Choose the size of the video and uncheck the "show suggested videos when the video finishes"
  4. Copy the code that appears in the box

Add the video to your page


1.    Navigate to your content item where the video should be added
2.    Edit the content item
3.    Embed code is in HTML format and must be added from the source code view rather than the design view.
4.    Within the design view, type “embed video here” where you want the video placed.  This will be used as a marker to help you find the location within the code source view to paste the embed code.
5.    To switch to the HTML code view, click the HTML button at the bottom of the editor.

htmlview  
 
6.    The HTML view is displayed in the editor.  
sourceview
 
7.    Either visually scan the document to locate your marker text of “Embed video here” or click somewhere within the code and Press CTRL + F.  The Find dialog is loaded.
8.    Type embed video here in the Find text box.  (The images are shown using Firefox browser.  Other browsers may look slightly different)

findmarker  
 
9.    Copy your Youtube embed code.  Be sure the entire code is copied.
10.  With the “Embed video here” highlighted, paste the YouTube embed code*IMPORTANT:  You must delete the word allowfullscreen from the code that you just pasted.  allowfullscreen must be deleted or you will receive an error that will prevent the page from being published. 

Your size options for videos are either 320px wide, or full width.  When you get the embed code from YouTube you can select Custom size, and then type in 320px in the width.  It will automatically give you the correct code to use.  If you want the video to be full width, you will need to add <div class="video-container"> right before your embed code, and then right after you would place </div>.  It would like like the below:

<div class="video-container"><iframe frameborder="0" max-width="683" height="512" src="//www.youtube.com/embed/idf_Vr-PGes"></iframe></div>

The video is now placed on your page.  Click the Design view button next to the HTML button at the bottom of the page to toggle back to the design view of the editor.  Within the design view of the editor, the video is represented as an imagePublish the page and view it to ensure the video is working.

videoimage  

 

 Inserting Embed Code How To Video

1 minute 33 seconds - Do not select the Use Old Embed code box as indicated in the below video.  We can now use the new embed code, but just need to be sure we remove allowfullscreen from the code.

 

Back to top