CHSSWeb Help
College of Humanities and Social Sciences

Embedding Multimedia

Embedding audio or video is not difficult, but you must have a host for your content. You do not upload audio or video to the CHSSWeb system.

To embed multimedia hosted elsewhere:

  1. Copy the code snippet your host provides.
    For YouTube videos, click "Share" underneath the video and then click "Embed". Copy the html code snippet (<iframe width=....>)
  2. Find and edit the page, article, event, etc.
  3. You will usually want to embed your multimedia within the main content field but the sidebar will work for some cases if done correctly (as seen to the right).
  4. Click on the HTML button in the WYSIWYG tool.
  5. Paste your code snippet into the html.
  6. Click the update button.
  7. Save.

Adding Other Multimedia

You can use the same process to embed other forms of content hosted elsewhere, such as surveys and other forms. The process is the same.

Adding A Caption

If you wish to add a caption to embedded multimedia, do the following:

  1. Copy the code snippet your host provides.
    For YouTube videos, click "Share" underneath the video and then click "Embed". Copy the html code snippet (<iframe width=....>)
  2. Find and edit the page, article, event, etc.
  3. You will usually want to embed your multimedia within the main content field but the sidebar will work for some cases if done correctly (as seen to the right).
  4. Click on the HTML button in the WYSIWYG tool.
  5. Paste your code snippet into the html.
  6. Before your code snippet, add this: <div class="embed-video"> or, if you want to right-align the video, <div class="embed-video textLeft">
  7. After your code snippet, add this: <p class=video-caption">This Is My Caption Text</p>
  8. After that, add this: </div>
  9. Click the update button.
  10. Save.

The results will look something like:

<div class="embed-video">
<iframe src="//www.youtube.com/embed/mbOEknbi4gQ" frameborder="0" width="420" height="315"></iframe>
<p class="video-caption">This is a caption</p>
</div>

 

Multimedia Resources

Print Friendly and PDF