uPlayer – Embedding media

Embedding media

When your material has been encoded you will receive an email that includes an embed code. Keep this email for future reference.

The process of embedding the media into an existing web page will depend on how you edit the web page.

Generally you will need to switch to HTML view with your editor, then paste the embed code at the relevant point.

We have successfully embedded media hosted on uPlayer into pages of the following systems:

  • MOLE
  • The Content Management System (CMS)
  • Minerva
  • cPanel

For most purposes we recommend that you use the embed code for the iFrame format, which is the default. Using this embed code will enable playback on most browsers and devices i.e. PCs, Macs, iPads, Android phones etc. It does not require a browser to have Flash installed to view.

Embedding media into MOLE courses

The exception to using the iFrame embed code occurs when you are embedding media into MOLE  courses. In this case you will need to use the Javascript ‘Modes’ embed code.

Explanation and uses of different embed codes.

Obtaining an embed code

The Searching for media page explains how to find the details for an individual item of media, which includes the various options for embed codes.

Embedded thumbnail sizes in uPlayer

The default size for an embedded thumbnail is 320 pixels wide by 260 pixels high. It is possible to embed thumbnails of different sizes.

  1. Go to the page for an individual item of media. The default embed code will be displayed in the Copy Code box to the right of the item.
  2. Click on one of the grey rectangles labeled 640×385 or 835×505. This will change the contents of the Copy Code box to give a different thumbnail size.
  3. Copy the contents of the Copy Code box and paste into your HTML editor.

It is possible to combine different settings for embed codes by choosing multiple options on this page. For example, you could generate a javascript ‘modes’ embed code with a 640×385 thumbnail, for delivery via a low bandwidth connection.

Streaming to low bandwidth connections

If your media is being viewed by people with low bandwidth connections, they may experience pauses during playback.

The default embed code delivers a high quality version but there is also a low quality version which may stream more smoothly to low bandwidth areas.

  1. Go to the page for an individual item of media. Below the Copy Code box is a Quality setting which is High by default.
  2. Change the Quality setting to Low. The embed code will be re-created with the new setting.
  3. Copy the contents of the Copy Code box and paste into your HTML editor.

It is possible to combine different settings for embed codes by choosing multiple options on this page. For example, you could generate a javascript ‘modes’ embed code with a 640×385 thumbnail, for delivery via a low bandwidth connection.