Skip to main content

System Status: 

How to Embed Videos on External Websites

Here’s how to embed one of your videos in “My Media” on an external website.

Within MediaSpace, there are three primary ways to make your videos visible to others:

  1. Setting the video to "unlisted" and sending viewers the URL
  2. Adding the video to a channel (where its visibility depends on the channel's privacy settings)
  3. Adding collaborators (co-viewers, co-publishers, and co-editors) so that your video displays in their "My Media"
  4. Embedding the video on a website

In this tutorial, we'll review how to embed a video by leveraging MediaSpace. The short version is that you need to find the embed code, copy it, and paste it into the code of your web page.

The Default Embed Player

A screenshot of the MediaSpace external embed player.Beyond the basics you can expect from a video player (a play button, volume controls, etc.), the Kaltura player that shows up on your webpage will have a number of features available to viewers:

  • Closed captions, visible by default. Each video that came into Kaltura after 13 June 2020 automatically has machine captions added to the video. These captions will be on/visible by default. Viewers can elect to turn them off if they wish.
  • Captions below the video. In order not to obstruct onscreen content, the video doesn't quite fill the player, allowing for black space below the video to display the captions.
  • Speed controls. Viewers can watch the video from 25% speed to 300% speed, at 25% increments.
  • Video quality selector. Kaltura generates multiple quality levels for every video, which they call "flavors." By default the player will detect the viewer's bandwidth and deliver the video at a commensurate quality level. Viewers can override this automatic choice by using the gear icon.

Whys, Requirements, Caveats

Why You Might Want To Embed a Video

  • You want to put your video on a web page

Requirements

  • A video for which you are the owner OR a co-publisher
  • A web page over which you have editorial control (i.e. so you can edit the code)

Caveats

  • Embedding your video on an external website will make your video public - i.e. clever users could grab your embed code and embed it elsewhere

How to Embed a Video

Note that these instructions assume that you have a website over which you have editorial control. Your goal here is to grab the video's embed code, which the website will render as a video player.

  1. If you're not already logged into MediaSpace, go to https://mediaspace.ucsd.edu, click "Guest" at the top right of the screen and select "Login." Enter your active directory credentials. The screen will refresh and "Guest" at the top of the screen will be replaced with your name.
  2. Click your name near the top of the page and select "My Media."
  3. Find the video you want to embed in your list, and click on either the title or the thumbnail.
  4. Below the video, click the "Share" tab. Information should populate below.
  5. Click the "Embed" sub-tab.

A screenshot of possible embed settings in MediaSpace.

  1. If desired, customize the start and end times, as well as the player size.

A Note about Start/End Times

If you set specific start and end times, do know that viewers are still able to manually jump to anywhere they want to be in the video (including before your start time and after your end time). So you're not "hiding" parts of the video from viewers.

  1. Select all the code in the textbox and copy it (Ctrl-C in Windows, Cmd-C on a Mac).
  2. Paste the embed code on your web page.
Note that if you're using a WYSIWYG (what you see is what you get) text editor on your website, you'll need to enter a mode where you can enter HTML code.