Embedding Videos from Popular Services such as YouTube & Vimeo

Overview:
 
You can embed videos from popular services such as YouTube and Vimeo, which will allow your visitors to view these videos directly on your website.  This eliminates the need for your visitors to click on a separate link and also keeps them on your website.
 
Instructions:
 
1. Find the video that you would like to embed on your website from a popular service such as YouTube or Vimeo.
 
2. Copy the related embed code that is provided for the video.
 
  • YouTube: Right-click on the video as it is being viewed and select the option for "Copy embed code".  This will copy the embed code to your clipboard, which you will need in step # 5 below.
  • Vimeo: Mouse over the video as it is being viewed and click on the Share icon (bottom icon) in the upper right corner of the video.  Next, click into the "Embed" box and copy the selected code provided.  This will copy the embed code to your clipboard, which you will need in step # 5 below.

3. Decide where you would like to embed the video on your website.  Possible areas are:

  • On a specific page on your website.
  • In a particular region on your website / template (such as the Header area).
  • In the Header or Footer area of a specific page on your website.

4. Edit the page / area on your website in which you would like to embed the video on (see below).

Specific Page:

  • Click on "Pages" from the menu on the left in your COOLSite Admin and then click on the corresponding icon under the "Edit" column, next to the page in which you would like to embed the video on.

Particular Template Region (Header, Footer, etc...):

  • Click on "Configure Layout" > "Configure Layout" from the menu on the left in your COOLSite Admin and then click into the appropriate region in which you would like to embed the video on.

Header / Footer on a Specific Page:

  • Click on "Pages" from the menu on the left in your COOLSite Admin and then click on the corresponding icon under the “Header/Footer” column, next to the page in which you would like to embed the video on.  A pop-up window will appear with two editor boxes (Header and Footer) and you will need to click into the appropriate editor box.

5. Click on the "Source" button on the editor toolbar and paste the embed code provided in step # 2 above, into the editor box.  You can then update the Height and Width values accordingly if needed.

NOTE: If there is existing HTML code in the editor box, you will need to know exactly where to paste the embed code, to avoid interfering with the existing content on this page / area.  If you are not sure where to paste the embed code exactly, please let us know so that we can further assist you with this.

6. Click on the "Process Page Update" / "Apply to Site Now" / "Save" button below the editor box, to save your changes.

7. View your website to ensure that the embedded video is showing up and can be played.