Embedding a Video

Issue/Question

How do I add a video to an OU Campus page?

Resolution

WKU ITS would prefer for you to add your video to YouTube and then embed your video into the WYSIWYG Editor using the YouTube Embed Component or YouTube Modal Component. This will ensure that the video will play in all browser versions including older browser versions. If you do not wish to add it to YouTube first, you can embed a .mp4 video as well. An .mp4 video will play on all modern browsers where as other video types might not.

Embedding a YouTube Video

  1. Navigate to the page where you wish to place the YouTube video. 
  2. Check out  the page. 
  3. While editing an editable region, click Insert Component in the WYSIWYG editor toolbar.
  4. In the Choose Component box, click a component name.
  5. Click Insert.
  6. Under Edit Component, enter information in the form fields.
  7. Click Save.
  8.  Note: For examples and more information, please see the examples located here

Embedding other content with an HTML Embed Code

  1. From the WYSIWYG editor go to the content area you wish to modify.
  2. Click Edit Content Area.
  3. Click the film strip icon in the top bar. When hovered over it will say Insert/Embedded Media.
  4. From the video's webpage gather the HTML code for the video.
  5. Copy the HTML coding.
  6. On the Insert/Edit Embedded Media popup click the source tab.
  7. Erase the contents of the source box and paste the HTML coding for the video.
  8. Click Insert.
  9. Click  Save.
  10. Click Publish to make the page go live. 

Embedding a .mp4 Video

  1. From the WYSIWYG editor go to the content area you wish to modify.
  2. Click Edit Content Area.
  3. Click the film strip icon in the top bar. When hovered over it will say Insert/Embedded Media.
  4. The Type should be HTML5 Video.
  5. For the File / URL click on the Browse icon and navigate to your file.
     Note: The .mp4 will have to have been uploaded to OU Campus and set as published.
  6. Click Insert after selecting the video.
  7. In the Advanced Tab, check Controls under HTML5 Video Options. This will automatically give your video controls to play it. Also, if you have an image you would like to use as a place holder before the video starts, add it as the Poster by clicking on the Browse icon next to Poster.
  8. Click Insert.
  9. Click  Save.
  10. Click Publish to make the page go live.
100% helpful - 1 review

Details

Article ID: 896
Created
Fri 11/7/14 10:10 AM
Modified
Mon 11/9/20 2:11 PM