Embedding Video in a Page

Videos can be embedded in most parts of a website, but currently must be hosted elsewhere. Syracuse University offers a video hosting service at SU Video Showcase (http://video.syr.edu), but videos from Youtube, Vimeo and other online services can also be embedded using embed codes.

Locating video embed codes

Youtube

To grab embed code for a video hosted on Youtube, navigate to that video's page on Youtube.com, and then click the "Embed" button beneath the video. A window will appear showing the embed code, plus a choice of the size of the video window that you want included on your web page. The embed code will look similar to this:

Although Youtube offers a variety of predefined sizes, you may need to use the "Custom" option to produce a video small enough to fit in the space required, especially if you are inserting the video code into a sidebar. Embedded videos should not be any wider than photos that you use for various content areas - so you may want to refer back to the Module Info page for reference on what size you need.

When entering a width value into the "Custom" size box, Youtube will automatically calculate the necessary height value to keep your video the right proportion, and will automatically change the embed code in the box above to reflect the new size.

Vimeo

Vimeo (vimeo.com) offers embed codes that are similar to Youtube's. If the video's owner has enabled embedding, the code and size options can be accessed by clicking on the "Embed" button on the video.

SU Video Showcase (Ensemble)

Videos being hosted at SU Video Showcase (http://video.syr.edu, also known as "Ensemble") can be posted on a site using embed codes, but you must have access to the account hosting the video in order to grab the code. Log in to the account at http://ensemble.syr.edu, navigate to the Media Library screen, and click on the video. A preview pop-up window will appear, with an "Embed" link in the lower left. Use the dropdown menu to select an appropriate size.

If the size you need is not in the dropdown menu, you can manually change the width and height values (see highlighted area above), but make sure you keep the new width and height proportional to the original dimensions of the video.

Placing video code into your page

Once you have chosen the width of your video, you can highlight the embed code, and copy it to your clipboard with Ctrl-C.

The embed code must be inserted into your document (or into your module) using the HTML Source Editor. Open the page or module for editing, then click on the "HTML" icon on the right side of the editing menu bar.

The HTML Source Editor window will pop up.  Paste the embed code from your clipboard (using Ctrl-V) where you want the video to appear in the page or module.  The example below shows where you would paste video embed code if you wanted it to appear before your video description.

When you are finished editing, click "Update" at the bottom of the HTML Source Editor window.  This will return you to your normal editing view. 

Even though you have pasted your video code into the document, the video will not appear correctly while you are still in the Edit view on your document.  (It may appear as a black box - this is normal.)  Save your changes by clicking the Submit button.  The video will appear in your page preview.