Documentation:UBC Content Management System/How to/How do I add or upload a video to my site

From UBC Wiki
Welcome to the support documentation for the
UBC CMS Service.

UBC Content Management System

UBC Collab Theme

UBC Collab Theme Overview
Theme Options Index
CLF Options
Layout Options
Display Options
Global Theme Options

Dashboard Overview
Pages and Posts
Adding Users

RSS Feeds
Going Live

Complete Topic Index
PDF Wiki Book Version

UBC CMS is not a hosting service and videos cannot be directly uploaded. To add video to a page it needs to be referenced or embedded from a service like YouTube.

NOTE: Please keep in mind that YouTube is a US service.

The following sections will explain how to set up and embed your videos using YouTube:

Uploading to YouTube

Many UBC department/units have their own UBC YouTube Accounts. Additionally, UBC has a YouTube channel that lets you upload unlimited amount of data - in other words you are not limited to 10 min long videos.

Please refer to the following on How to upload a video to YouTube EDU

Embedding a YouTube video to a page or post

WordPress supports oEmbed just enter the URL to the YouTube Video and magic will happen. That is,

  1. in your web browser, open the YouTube video you want to embed
  2. copy the video URL (similar to from the browser's address bar
  3. edit the page, post, or widget on which you want to embed the video, and paste the URL
  4. optional: you can clean up the video’s URL by deleting any characters after and including an ampersand
  5. Save!

Other services supported by WordPress oEmbed include:

Using Custom Fields With Embed Code:

Before you can use custom fields, you have to make sure that the "Conditional Custom Fields Shortcode" plugin is enabled (How do I enable plugins?).

Once you've enabled custom fields, they will be available on the Edit/Add New Page and Edit/Add New Post pages (if you they are still not visible, check that their visibility is enabled in the "Screen Options" drop-down tab at the top of the page).

Embedding videos with custom fields is the same as embedding Google Maps with custom fields; therefore, please refer to the "Embedding Through Custom Fields" section of this page for more information on using custom fields.

Embed video from other sources

Videos can be embedded on a CMS website or any web page using html. Using the block editor you can add an html block to a page. If you are hosting videos on Panopto you can get a link by allowing the file to be downloaded from anywhere and choosing the 'podcast' output. Not all video hosting services allow referencing the video file, those that do allow for more functionality such as background video.

Add HTML to a widget.
<video width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.

If you would like to learn more about the video tag you can do so at