How to Add a YouTube Video

You cannot use Internet Explorer (IE) to edit your website because IE doesn't follow the World Wide Web standards for coding.

Click on any of the images to enlarge them

  1. Go to YouTube https://www.youtube.com/ and find the video you want to add to your site

  2. Click on "Share" 

  3. Click on "Embed" 

  4. Click on "SHOW MORE" 

     Steps 1-4

  5. Uncheck "Show suggested videos when the video finishes" 

  6. Use one of the preformatted sizes or choose "Custom size" to select your own size 

  7. Put the width or height in the box (YouTube will constrain the video's proportions so the height will adjust with the width and vice versa) 

  8. Copy all of the coding in the box 

     Steps 5-8

  9. Go back to your site and click on the page you want to embed the video to and click "Edit Page"

     Step 9

  10. Click on one of the green circles with the white plus sign to “Add Module” or click on "Layout", in the top, to change the page layout and then add a module.

     Step 10

  11. Click on “Custom Code”.

     Step 11

  12. Paste the embed code from ​​YouTube into the “Code” box by right clicking your mouse and clicking on “Paste”.

    Click “Save” in the top right corner.

     Step 12

  13. If you are using Chrome you will have to do a final save before the video will show. In Firefox and other browsers, the video can be seen in the preview mode. This is also true about videos.

  14. Click ​​"Save" again to keep the changes you just made.

     Steps 13 & 14

  15. If the video is not the right size: “Edit Page”, hover over the module and click “Edit”, and then go through the steps again. ​ 

      Step 15

  16. If the video is too close to or too far away from another module: “Edit Page”, hover over the module and click “Edit”, and click on “Style” in the upper left corner. In the box you want to use to move the module add a positive number followed by px to increase space or a negative number followed by px to decrease space, e.g. 35px or -35px. If the module is at the top of the page “Margin” styles are usually best to use. If the module is second, third, etc. on the page, one of the “Padding” styles are usually best to use but, play around with all of them to see what works best for you.

      Step 16

    NOTE: The number must be followed by px because this is what tells the module how many pixels you want it to move e.g., 35px to increase space or -35px to decrease space.

    NOTE: “Style” is provided in every module. You can follow these steps if you would like to move any of the modules around.