How to Put a Video on a Web Page

Adding Video to Your Web Pages

Offering video on your website is a great benefit for your visitors, especially if you have videos of interest or of special use to your target audience. For instructional or promotional videos, you will want to take advantage of the free networking and marketing YouTube will do for you if you upload your video there. If your video is not for the general public, Vimeo is a good option. Both services are free for you.

Click here to learn how to get started with YouTube.

Click here to learn how to get started with Vimeo.

Embed Your Video on a Website Page

Step One: Get the Embed Code

In YouTube:

1. Go to your video in YouTube and click the Share link below the video.
   
2. Click the Embed link that pops up in the Share panel.
   
3. Choose the size for your video. If you don't see all the options, click Show More in the Embed box. You will probably see a drop list like this:
   
   If your video will be the main content of a page, you might want to set it to be a width of 800 - 1,200 pixels or so. If you want it to be medium sized, 400 - 600 pixels wide is a good range (YouTube will adjust the height automatically if either of these are not in your list of choices and you do them as Custom Size).
   
4. Make sure the topmost of the checkboxes is unchecked (you most likely don't want them suggesting videos after yours has finished playing; that is free marketing for them).
5. Copy the embed code.

In Vimeo:

1. Go to your video in Vimeo and click on the Paper-Airplane Icon.
   
2. Below the Embed Code, click Show More to see your full options. Choose the size of the video you want If your video will be the main content of a page, you might want to set it to be a width of 800 - 1,200 pixels or so. If you want it to be medium sized, 400 - 600 pixels wide is a good range (Vimeo will adjust the height automatically for whatever pixel width you enter).
   
3. You also have options, such as Autoplay (we strongly recommend you don't use this, unless this video will be on a page where the visitor will expect to see a video playing when they go to the page: most visitors will immediately stop a video or close the page window when unexpected content begins playing and they didn't push play). You can also set the video to loop, so if it is a short promotion or something that you would want to continuously run, this is an option for you.
4. Once you have your options in place, copy the Embed Code.

Step Two: Embed the Code on Your Page

On your website, follow these steps to get the video onto the page. Please note, for best results in working with our Content Editor, please use Firefox as your browser. Here are the steps:

1. After logging into your site, go to the page where you want to place the video and move your mouse over the triangle in the upper left with the blue Plus.
   
2. In the menu that pops up, click Add Body Content.
   
3. Find the Content module at the top of the list and click the Add button for it.
   
4. The Content Editor has a couple of buttons that relate to videos, but those functions do not work properly, so please don't use them. You will want to find the Source Code button (just to the left of Formats; it looks like two arrows pointing away from each other). Find that button and click it.
   
5. Paste the embed code you copied immediately below whatever else is in there. Click OK at the bottom of the Source Code window to update the code change.
   
6. PLEASE NOTE: You will see a gray box for the video frame. After you save the module, you will see the actual video frame when you view the web page. You can click on the gray box to highlight it, then go to Formats and click to Center Align it, if you like.
   
7. Scroll to the bottom of the screen and click the Save button.

Please note that if your video looks too large or too small at this point, you can use the corner handles to drag the video to the size you want. But for a perfect fit, you could also go back to YouTube or Vimeo where you uploaded the video and adjust the size to get a new Embed Code, then replace the code using the steps above.