Customer Sign In

upLynk

Embedding the upLynk player

Embedding the upLynk player

Summary Learn how to embed the upLynk player into Tumblr, Blogger, or your self-hosted web page and how to restrict playback based on domain.

Skill level required Beginner. Basic HTML knowledge a plus.

Time to complete 5 minutes

Step 1. Select an asset and copy the embed HTML

Embedding an asset is fairly straightforward. Simply locate the asset in CMS, copy the HTML embed code, and paste it into your web page or blogging tools.

  1. Head to upLynk CMS and sign in.
  2. Select the asset to be embedded from the All Content tab. The Editor pane on the right hand side will populate with the asset's details.
  3. Select the Embed tab in the Editor panel (below the video player).
  4. Select and copy all of the code under Embed HTML. You can ignore the other form fields for now as we’ll explain them shortly. Copy everything in the Embed HTML section

Step 2. Paste the embed HTML into the page

The concepts for embedding the upLynk player are similar for all platforms, even those that aren't listed in this tutorial.

Skip to step 3 if you're already comfortable embedding HTML. Otherwise, browse ahead to one of the following:

Step 2a. Embed in Tumbler

  1. Ensure you're logged into Tumblr and go to your Dashboard.
  2. Click the Video button to create the entry. Click Video in the Dashboard
  3. Next you’ll see the Add a Video page. Paste the embed HTML code you copied from the CMS into the Embed a Video tab. Add a caption if you'd like
  4. Click Create post and view your embedded video!

Step 2b. Embed in Blogger

  1. Ensure you're logged into Blogger and create a new post.
  2. Don't use the Insert a Video button, as this will expect you to upload a file. Don't use the insert video button
  3. Instead, click HTML to edit the raw HTML. Click the HTML tab
  4. Paste the embed HTML on a new line at the end of all the html. Paste it in the end
  5. Click Publish and view your embedded video!

Step 2c. Embed in your own web page

  1. With a text editor such as Text Edit for OS X or Notepad for Windows, open up the HTML file that will hold the video.
  2. Paste the embed HTML anywhere between the <body> and </body> tags, according to your design.
  3. Save the HTML file and upload it to your server.
  4. Visit the URL for the file you just uploaded and view your embedded video!

Step 3. Restrict playback to specific domains

upLynk’s domain restriction feature lets you control on which domains playback is enabled. For example, setting the allowed domains to www.myTutorialsAreGreat.com will prevent the video from playing on any domain other than www.myTutorialsAreGreat.com

  1. Select the Embed tab from the Editor pane.
  2. Under Allowed Domains, enter one or more domain names that will allow playback. Leave this field empty to grant permission to all domains. You may wish to start with a fictitious domain to see the domain restriction in action. You'll notice that only the text "Not found" is displayed. Enter domains to restrict or leave empty to allow all
  3. Click Save and test playback by visiting your video page

Step 4. Expire an embedded player

At some point you may wish to prevent existing embedded players from playing your asset. This is easily accomplished via the CMS. Remember, expiring a player only affects players for the current asset—not all the assets in your account.

  1. Select the Embed tab from the Editor pane.
  2. Click the Expire button located below Embed HTML.
  3. The CMS will generate new embed HTML code and stop any older embed code from playing the content. Viewing any pages with the old embed code will display a "Not found" message.

Step 5. Resize an embedded player

You can change the size of the embedded player by altering the dimensions before pasting the embed code in your web page or blog.

  1. Select the Embed tab from the Editor pane.
  2. Enter new values (in pixels) under the Dimensions section.
  3. The embed HTML is automatically updated. Select it, copy, and repeat Step 2 for embedding your video!

Finished!

Congrats! You've successfully embedded a player on your blog or your self-hosted web page and learned how to restrict playback based on domain. The next tutorial will teach you to embed a DRM-free video in web pages hosted on your own web server

Back to tutorials