Embedding a Video

Introduction

If you want to display your platform's video(s) on an external website, you can do so by simply copying and pasting the video's embed code into your website's HTML editor. Your videos are still managed via the admin panel of your platform.

Once embedded, the video will be made available for viewing in a video player on a webpage of your website.

Access the Embed Tab

You can access the Embed Image tab from the back end of your platform in a video container while editing a VOD, and Live Event.

Embed Types

Use the information below to understand the three different embed types available to use.

Dynamic Embed

The Dynamic embed will update automatically if you change the cover image or video from the same video container it was copied from.

Use this embed as the default embed type.

<div><script src="https://www.exampleonly.tv/ng/apiv2/public/player/2/uid/75ae1478-8a11-4bbb-9782-c80b72004937?width=704&height=396&autoplay=false&language=en" id="wpdirectplayer_75ae1478-8a11-4bbb-9782-c80b72004937"></script></div>
	

iFrame Embed

iFrame Embed is like the Dynamic Embed, and will update automatically anytime a change is made to the embed code options, except it also uses an `<iframe>` tag to embed the video so it doesn't interact with the rest of the page. The IFrame embed isolates the player from the page styling and code.

Use the iFrame Embed if something on the destination page is interfering with the Dynamic Embed.

<div>
    <iframe width="704" height="396" src="https://www.exampleonly.tv/ng/apiv2/public/player-iframe/75ae1478-8a11-4bbb-9782-c80b72004937?autoplay=false&language=en&iframe_events=true" scrolling="no" allow="autoplay" allowfullscreen frameborder="0" marginheight="0" marginwidth="0" style="border:0; overflow: hidden; font-size: 80%;"></iframe>
</div>
	

Static Embed

The original embed code. The Static embed does not update automatically on your webpage if you change the cover image or video from the same video container it was copied from. If changes are made, copy the new embed code options to replace the current one your webpage.

Use this code if for some reason the Dynamic and iFrame embed types aren't working.

<div style="width:704px; height:396px">
  <div id="wp-player-ABCD_EFGHIJKL12"></div>
</div>
<script type="text/javascript" src="//worldplay-a.akamaihd.net/wpplayer/52.2.2/wpplayer.standard.min.js"></script>
<script type="text/javascript">
  var player_config_ABCD_EFGHIJKL12 = {
    "amp": {
      "autoplay": false,
      "language": "en"
    },
    "media": {
      "title": "Jellyfish",
      "poster": "//wpmedia01-a.akamaihd.net/en/asset/public/image/ABCD_01lmnopq01/resize/w/1080/h/600",
      "duration": 112,
      "metadata": {
        "ga_category": "WorldplayVideo_v2",
        "ga_label": "Jellyfish|3f7b1967-9461-4e83-9c91-ba90df7fe04e|ABCD_EFGHIJKL12|036d2ba8-7ea2-4899-809e-aabcc3e406fd"
      },
      "source": [
        {
          "src": "https://example.akamaized.net/encoder/output/ABCD/f8/48/f8483021-2cbe-4761-9bd8-6767fe427a74/ABCD_EFGHIJKL12.m3u8",
          "type": "application/x-mpegURL"
        },
        {
          "src": "//wpapr04n3k1yjx0.akamaized.net/encoder/output/ABCD/f8/48/f8483021-2cbe-4761-9bd8-6767fe427a74/ABCD_EFGHIJKL12_800k.mp4",
          "type": "video/mp4",
          "rules": [
            "android_mp4"
          ]
        }
      ]
    },
    "embed_type": "vod"
  };
  wpAddPlayer("wp-player-ABCD_EFGHIJKL12", player_config_ABCD_EFGHIJKL12);
</script>
	

Embed Code Options

The information below explains the configurable options available for each of the embed types.

Before you Begin

• By default Dynamic embed is selected as its the most popular embed. Select a different embed type if required
• iFrame embed has extra configurable options
• Advanced options are for Static embed only
• All embed types have the optional player size and enable auto-play settings available
• Changes made to the Embed Code Options automatically updates the Embed Code box

Configuration Steps

1. Choose the Embed Type:
   1. Dynamic Embed - Click on the radio button to select it, OR
   2. iFrame Embed - Click on the radio button to select it. The next two options below are optional:
      1. Video Start Time - Enter the value in seconds
      2. Enable iFrame Events - (for Telus customers only)
2. Choose a Player Size

   1. Responsive - Click on the radio button to select

      Selecting this option is recommended if the external website is intended to be viewed on both desktop and mobile devices

   2. Fixed Size - Enter the desired size of the video player
3. Enable auto-play
   1. Click on the box to enable it
      1. Start muted (Live embeds only)

      2. Start with sound - Most browsers do not support this feature (Live embeds only)

         If auto-play is enabled, the video will play automatically when the page is loaded

4. Select the Language (requires Multi-Language feature)
   1. Click for a dropdown list of available options
   2. Select the preferred language in the dropdown

5. Show Advanced Options This type of embed code provides more options for customization, but means that you must regenerate the embed code if any changes are made to the source video

   Selecting any of the advanced options below will result in a static embed code being generated

   1. Click on the link to open its menu
   2. Add a checkmark to the features that you want in the Static embed code:
      1. Force Static Embed - A static embed will be generated, even if no other advanced options are selected
      2. Disable Play Button overlay - The play button will disappear in the middle of the player
      3. Hide Player Controls - The player control buttons will not display in the player
      4. Override GA ID - A Google Analytics ID can be entered below to replace the platform GA ID

Copying Embed Code

1. Click the Copy to Clipboard button 
2. Paste the embed code to the HTML editor of your webpage
3. Click Done to go back to the main library