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:

  1. Copy the code snippet your host provides.
    For YouTube videos, click "Share" underneath the video and copy the link.  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. However, the sidebar's small width will be an issue.
  4. In the WYSIWYG toolbar, Click on the "Insert" tab and select "Media". Paste the link into the Source text field. The link will automatically populate the dimensions fields. (Note: Do not edit these dimensions. Your video will still be responsive for all devices.) 

    Embed Multimedia screenshot

  5. For other video hosts, like Vimeo, you may be given an embed code which will begin with <iframe ...>. To embed a video follow the same instruction above. When the "Insert/edit media" box appears, click the "Embed" tab and paste the code into the text box. 

    Insert multimedia screenshot
  6. Important: make sure the iframe code has a title, as shown in the example above. Some providers, including YouTube, do not include a title, which means that viewers using alternate browsers, such as a browser which reads the content of the page out loud, are poorly served by the video link.
  7. Click OK and Save Changes to your page. 

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. Click the video to highlight it and then click Insert >> Media. The "Insert/Edit media" box will appear with the video's code. Click the "Embed" tab where you will see the video's iframe code snippet.
  2. Before the code snippet, add this: <div class="embed-video">
  3. After the code snippet, add this: <p class=video-caption">Oh caption, my caption.</p>
  4. Add your caption to the snippet by replacing the placeholder text.

    Adding a caption to multimedia screenshot
  5. Click the Ok button and save changes. The results will look like this:

    This is a caption

Multimedia Resources