Embed Media Player Tutorial

Learn how to embed a media player on a self-hosted web page using the same embedded player used in the Uplynk CMS.

Software Prerequisites

Uplynk CMS
Web server (https://simplewebserver.org/ can be used for basic testing)

Knowledge Prerequisites

Basic Uplynk CMS administration
Basic web hosting

Key Steps

Copy the embed media player code.
Paste the embed media player code.
Apply security to the embedded media player.

Step 1 - Copy the HTML Embed Code

The CMS provides HTML code that you can embed on a web page.

Sign in to the CMS.
Select one of the following:
- Asset: From the Content tab, select the desired asset.
- Live Event: From the Live Events page, select the desired live event.
- Live Channel: From the Live Channels tab, select the desired live channel.
Select the Playback tab.
Optional: Set the dimensions, in pixels, for the embedded media player through the iFrame Width and iFrame Height options.
Select Copy to copy the HTML code provided under the Embed HTML option.

Step 2 - Paste the HTML Embed Code

The HTML embed code provided within the CMS is compatible with a variety of platforms. The instructions below explain how to embed it in a self-hosted web page.

Self-Hosted Web Page: Embed Video

Open the desired HTML file in a text editor.

Paste the embed code within the <body> tag (lines 7 - 13).

Sample HTML code:

<html>
  <head>
    <title>My Sample Web Page</title>
  </head>
  <body>
    ...
    <p>Body text goes here.</p>
    <iframe style="border:none" allow="encrypted-media" width="640" height="480" src="https://content.uplynk.com/player5/345pms4DsfMCxnPXoChv0def.html"></iframe>
  </body>
</html>

Save your changes.
Upload the updated HTML file to your web server.
Load the web page and verify the embedded video plays correctly.

Step 3 - Optional: Restrict Playback to Specific Domains

You can restrict playback of the content referenced in the embedded code to a set of authorized domains. Attempting playback from an unauthorized domain results in a "Not found" message.

Example

If you set www.example.com as the only allowed domain, playback is only permitted when the player code is embedded on a web page accessed through the www.example.com domain.

This means that playback is allowed for the following web page:

http://www.example.com/videos/marketing.html

The embedded video cannot be played back through any of the following web pages:

http://cdn.example.com/videos/marketing.html
http://www2.example.com/videos/marketing.html
http://www.example.org/videos/marketing.html

Instructions

From the Playback tab, set the Allowed Domains option to a comma-separated list of domains that are allowed to play your content via the embedded code.
Set the Allowed Domains option to a blank value to allow playback from any domain.
Select Save.
Test playback by refreshing the web page where the player is embedded.

Step 4 - Optional: Expire HTML Embed Code

Expire the HTML embed code associated with an asset, live event, or live channel to disable playback via that code. Upon expiring embed code, new embed code is generated automatically.

Expiring embed code takes effect immediately and is permanent. Attempting to play expired embed code results in a "Not found" message.

From the Playback tab, select Expire Embed Code to prevent playback using that version of the embed code.
Select Save to apply this change and automatically generate new embed code.
Replace the HTML code that was embedded in step 2 with the updated version.