Insert/Edit Embedded Media

Overview

The Insert/Edit Embedded Media or Insert/Edit Video tool on the WYSIWYG Editor toolbar allows users to include markup for video, movies, and audio on a page. This embeds the proper markup such as the video tag or object in order to add the proper media player for the media type. Attributes/parameters for specific media types can configured on the Advanced tab.

Classic Editor

Insert Media Icon in Classic

JustEdit

Insert Media Icon in JustEdit

Users can link to media from external sources, as well as upload files directly to OU Campus

Note: If HTML5 schema is not in use for the WYSIWYG Editor, HTML5 tagging may not be supported on the rendered page. An administrator may cautiously enable the schema for the WYSIWYG Editor.

For more information about HTML5 and schemas, visit the WYSIWYG Editor in Site Settings page.

This section includes the following topics:

The Advanced Tab is also available when utilizing the Classic Editor; for more information, visit the Advanced Tab page

Inserting Media From OU Campus

  1. Edit a page with the WYSIWYG Editor.
  2. From the toolbar, click the Insert/Edit Embedded Media icon. This shows the Insert/Edit Embedded Media modal.

    General Tab for the Insert/Edit Embedded Media Dialog

    Insert/edit Video Modal

  3. If you are in the Classic Editor, select a Type. By default Flash is select, but HTML5 and several other types are available. If you are using JustEdit, it will automatically detect the type.
  4. From the File/URL or Source field select the Browse icon and use the file chooser to select the media file. 
    A media file can be selected from any environment to which the user has access; specifically, staging, production, auxiliary sites, the folder structure within the site, and among sites within an account. Media files may be filtered by name or searched for by tag. 
    At this point, one or more files may also be uploaded, and one can be selected to embed on the page.
    For more information on uploading files, visit the Upload page. Keep in mind that your institution may have a designated folder for uploading resources.
    Uploading Embedded Media from the WYSIWYG Editor
  5. Once the media file is selected, click Insert.
  6. Configure any other options on the modal tabs, and click Insert or OK again.
    The media does not render within the WYSIWYG Editor. Instead a placeholder box the size of the intended media is displayed. Once the page is saved, the video renders in the preview. Depending upon the configuration, the file may need to published before it will play in preview.

Media Embed Rendering
Video Rendering in JustEdit

Inserting Media from an External Source

In addition to uploading media files to OU Campus and inserting them with the WYSIWYG Editor, users can also link to media files from external sources, such as YouTube or other similar video-sharing services. This method uses an <iframe> tag.

  1. Locate the video on an external video sharing service such as YouTube.
  2. Copy the URL for the video from the top address bar.YouTube URL
  3. Return to the page in OU Campus where the video should be placed, and place the cursor at the location where the video should be displayed.
  4. Click on the Insert/Edit Embedded Media icon in the WYSIWYG toolbar.
  5. If you are in Classic Editor, in the General tab > Type field select Iframe. Paste the file's URL into the File/URL box.
  6. If you are in JustEdit, paste the URL into the Source field. 
  7. When complete, click Insert

General Tab

The General tab in the Insert/Edit Embedded Media tool is used to determine the type of media file that will be inserted, which will determine the markup that will be used. Also, the media file URL can be specified here or a file selected with the use of file chooser/browse icon.

  • Type (Classic Only): Select the media type; this determines the markup and/or player that will be used for the media:
    • HTML5 Video
    • HTML5 Audio
    • Flash (default)
    • Transcode-It
    • QuickTime
    • Shockwave
    • Windows Media
    • Real Media
    • Iframe
  • File/URL or Source: The file can be browsed to within the folder structure of the site, uploaded, or a URL from an external source such as YouTube can be used.
  • Alternate Source (JustEdit Only): If you have a secondary source for the video, such as another location where it was uploaded, you can paste it here. The alternate source will display in case the source is unavailable. 
  • Dimensions: Height and width of the media in pixels, which will determine how it renders on the page. Constrain Proportions can be selected to maintain the original ratio of the media. 
  • Preview (Classic Only): Some media types, depending upon browser configuration and if the media file has been published, will render a preview.
  • Poster (JustEdit Only): If you insert a video from a local source, you can upload a thumbnail image for it by using the file chooser. 

Source/Embed Code

The Source or Embed Code tab of the Insert/Edit Embedded Media modal provides users a space where they can directly post the embed code of their video. 

Source Tab of the Insert/Edit Embedded Media Dialog

Embed Code Tab

Final Notes/Troubleshooting

The WYSIWYG Editor uses the XHTML schema to validate the content when saving. In the case of an <iframe>, the "name" attribute is deprecated for XHTML, and is removed. Instead, try using the ID attribute, or id="iframename".

There are a few reasons why a video may not render:

  • The browser used to view the page does not have the correct plugin.
  • The type of media specified is incorrect for the media. Make sure the video appears in the Preview screen inside of the Insert/Edit Embedded Media window.
  • The video file has an incorrect or invalid file extension.

If you are embedding a Youtube video on a page by taking the embed code Youtube provides and pasting it into the source code of a page, you may encounter an error where the page cannot be edited. This is caused by a small error in the embed code that is easily fixed.

The recommended course of action for embedding videos is to do it through the Insert/Edit Video tool in 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 in the following manner.

Within OU Campus, iframe elements (such as the Youtube embed code) cannot be empty between the <iframe> and </iframe> elements. A code such as this will break the page:

<iframe width="560" height="315" src="insert-youtube-link-here" frameborder="0" allowfullscreen></iframe>

However, this can be solved by adding a nonbreaking space in between the elements, like so (bolded for emphasis):

<iframe width="560" height="315" src="insert-youtube-link-here" frameborder="0" allowfullscreen>&nbsp;</iframe>

Or alternatively, another solution might be to add in a comment:

<iframe width="560" height="315" src="insert-youtube-link-here" frameborder="0" allowfullscreen> <!--add a comment to prevent iframe from being empty--> </iframe>

In either case, having the value in between the starting and closing <iframe> elements will prevent an empty iframe, which should resolve any of those errors.