To insert a video or other playable media onto a page:
- While editing an editable region, click the "Insert/Edit Video" icon ( or ) on the toolbar.
- If you are using the Classic editor, you need to specify what kind of video or media you are inserting in the "Type" field dropdown.
- Enter your video into the "File/URL" or "Source" field:
- If the video is stored in OU Campus, select the "Browse" icon and use the file chooser to pick the media file you want. You can also choose an auxiliary site or other environment to look for files in with the dropdown in the top-right corner. Alternatively, upload it directly. Click "Insert" once you have your video.
- If the video is externally hosted, paste the URL of the video page into the field.
- If desired, define the dimensions of the video. Check "Constrain proportions" to keep the original aspect ratio of the file.
- If you are using JustEdit, you can also set an alternate source as a back-up in case the first source fails to load, and a poster (a static image to display if the video doesn't load in, like a thumbnail).
- Click "OK" to add your video to the page. You won't see it while editing; there is a placeholder box instead. Save and exit the editable region to see how your video displays.
Is your video not rendering on the live website page? Some common reasons are:
- The browser used to view the page doesn't have the correct plugin.
- The type of media specified under "Type" is incorrect for the file you chose.
- The video file has an incorrect or invalid file extension.
Alternatively, if you are adding a video from an external source that provides an embed code (such as Vimeo or YouTube), copy the embed code and paste it into the "Source" (Classic editor) or "Embed Code" (JustEdit) tab. Then click "OK" to add your video to the page.
If you embed a YouTube video on a page by taking the embed code YouTube provides and pasting it into the source code of a page, you might encounter an error where the page cannot be edited. This is caused by the default YouTube embed code being empty between the
</iframe> elements, which causes errors in OU Campus.
The recommended course of action for embedding videos is to do it through the WYSIWYG editor by pasting in the URL of the video. However, if you are using the embed code provided by YouTube, it can be fixed by adding an
</iframe> elements. Or alternatively, add in a comment. The value in between the starting and closing
<iframe> elements prevents an empty iframe, which is what caused the error initially.