Embedding Videos

Note: You must be an advanced author to gain access to this functionality. Please contact the Director of Web Development or the Web Developer to get access.

The Responsive Video component allows web authors to insert YouTube videos onto their pages that will automatically resize based on the width of the screen. Web authors can choose between different sizes and whether the videos stay on their own line or float to the left or right of text on the page.

Examples

75% Width, Center Alignment

50% Width, Default Alignment

With the Default Alignment, the text will stay above or below the video rather than wrapping around it.

50% Width, Left Alignment

If you want the text on the page to flow around the video, choose the 50% or 75% width and the Left or Right alignment. Default and Center aligned videos will stay on their own line separated from the text, and 100% width videos will take up the full width so there is no room for text on either side.

Step-By-Step Instructions

  1. Place your cursor in the area that you would like to insert the video, and click on the component icon in the 2nd row of the toolbar.
    a screenshot of the cms toolbar with a circle around the component icon
  2. Click on Responsive Video from the component list, and then click Insert.
    a screenshot of the choose component box with a circle around responsive video
  3. Copy the unique video ID from the YouTube URL. Note: You only need the video ID from the end; do not copy the whole URL.
    a screenshot of the address bar on a YouTube video page with the video ID circled
  4. In the Edit Component box, paste the video ID from the URL into the first line, enter the video's title in the second line, and choose the width and alignment. Then click Save.
    a screenshot of the edit component box
  5. A blue placeholder will appear on your page while you are in edit mode. Your video will appear normally after you have saved the page.
    a screenshot of a blue placeholder bar that says responsive video
  6. To edit a video, click on the blue placeholder, and then click the pencil icon. To delete a video, click on the blue placeholder, and then click the X.
    a screenshot of the blue placeholder with the edit and delete buttons visible
  7. Remember to either "Save and Exit" if you want to make more edits later (the page will not be live) OR, simply click the green "Publish" button to make your changes live on the site.