Add the Player to a Website

Embedding The Player On Your Website - HDOnTap Streaming Service

Overview

Once your camera is installed and online, you will need to place a line of HTML code on your website; this is how your website will display your live stream. We use an iFrame as opposed to directly embedding the player on your website so that any changes made to your stream’s look and feel will be dynamically updated on your website, meaning that you will not need to re-add the code.

Prerequisites

• You must have the iFrame embed code. This will be emailed to you by your HDOnTap Account Representative. You can also retrieve it from the HDOnTap Portal at any time by following the instructions below.

Embed codes are available as either Static or Responsive. Static Embeds maintain a fixed size regardless of the size of the browser window, while Responsive Embeds will scale with the page.

Static Embed Code will be similar to:

<iframe width="640" height="360" src="//portal.hdontap.com/s/embed?stream=hdot_koi-pond-HDOT&ratio=16:9" frameborder="0" allowfullscreen="true" allow="autoplay; fullscreen" ></iframe>

Responsive Embed Code will be similar to:

<div style="position: relative; padding-bottom: 56.25%; overflow: hidden; height: 0px;"><iframe width="100%" height="100%" src="https://portal.hdontap.com/s/embed/?stream=koi-pond-i5_hdontap-HDOT&ratio=16:9&fluid=true" frameborder="0" allowfullscreen="true" allow="autoplay; fullscreen" style="min-height: 100%; width: 100%; position:absolute"></iframe></div>

• To retrieve your embed code from the Portal, you must have your Portal login. Contact your Customer Administrator or HDOnTap Support if you need assistance with your Portal credentials.
• For static embeds, you will need to know the width and height you would like the player to be. Use our Player Sizing Tool to preview the player size and generate the proper width and height dimensions.
• You can customize your player (logo overlay, autostart, etc.) by logging in to the HDOnTap Portal (optional). For more detailed instructions, see Customizing the Webcam Stream Embed.

Step-by-step instructions

1. If you already have your embed iFrame code, skip to Step 5. Log in to the HDOnTap Portal and navigate to Streaming > Embed Configs:

2. Click the Embed ID for the embed you would like to add to your website:

3. Click the radio button for the type of embed you would like (Static or Responsive):

4. Copy the iFrame embed code.
Tip: Copy the code by clicking on the code or the copy icon . You can also highlight the text and press Ctrl+C (PC) or ⌘+C (Mac). Paste the code by pressing Ctrl+V (PC) or ⌘+V (Mac).

For Static Embed Codes:

For Responsive Embed Codes:

5. Once you have the iFrame embed code, open your website in your preferred HTML editor (for example, Adobe Dreamweaver).
Note: If you are using a CMS (content management system), you may need to access the source code where you would like to add the camera (contact your website administrator for further assistance).

6. Paste the iFrame embed code in the desired location on your site. Save your changes to your website and refresh. Your player should now be live on your site!
Tip: Paste the code by pressing Ctrl+V (PC) or ⌘+V (Mac).

What the embed code looks like

The embed code from the Portal looks like this:

<iframe src="https://portal.hdontap.com/s/embed/?stream=live-stream-embed-id&ratio=16:9&fluid=true" frameborder="0" allowfullscreen="true" allow="autoplay; fullscreen" style="width: 100%; aspect-ratio: 16 / 9; display: block;"></iframe>

• live-stream-embed-id is a placeholder. In your real code it is replaced by your stream's Embed ID. Always copy the code from the Portal so the Embed ID is exactly right.
• ratio=16:9 tells the player the shape (aspect ratio) of your video. Most cameras are 16:9 (widescreen).
• fluid=true makes the player responsive, so it fills the width of the space you put it in and resizes with the page.
• The style attribute sets the player to 100% of the available width and uses the same 16:9 aspect ratio to set the height automatically, so there's no need to set a width or height.

To make the player smaller than the full width of your page, place the iFrame inside a container (for example, a div) and set that container's width. The player will scale to fit it and keep its shape.

If you use a Static embed code with fixed width and height values, use the Player Sizing Tool to choose dimensions that match your video's aspect ratio, then change those values in your code.