How to Embed Live Streams, Videos, and Playlists to Your Website

Embedding Options in IBM Video Streaming

All IBM Video Streaming accounts allow you to embed your live channel player, a recorded video, or the player sidebar, which includes Chat and Q&A modules, on your own website. This article explains where to find and how to use the different embedding features in IBM Video Streaming.

Getting the Embed Code from the Player

The simplest way to get the embed code for any live video or recorded video player is through the player itself. For more advanced options, use the IBM Video Streaming dashboard embed page.

• Hover over the video player.
• In the upper-right corner, click the Share icon.
• From the Share menu, click Embed.

• Copy and paste the code shown in the pop-up box.

Using the IBM Video Streaming Dashboard Embed Page

• From the Channel menu, click Embedding.

• Choose between Player, Interactivity, Combined, or Playlist, then click Create Embed.
• Embed configurator page opens in a new browser tab.  Copy the code displayed in the text box and paste it into an HTML page to embed the video player onto your website.

Embedding a recorded video

You can obtain the embed code for a specific video from the video's menu.  Click the down arrow icon to open the menu, then select Embed.

Embedding the sidebar and video gallery

You can get a video gallery widget and a fully functional sidebar, including Chat and Q&A modules.

As you change the options for your embed, the screen shows a preview of what your embed will look like, and the code updates to reflect the selected options.

Embedding a playlist

The Playlist embed option allows you to embed a video playlist that includes a side panel with both the info tab and playlist navigation. Click here for more information on creating a video playlist.

When interacting with the playlist, viewers can see a list of available content and jump directly to a video of their choice. If another video is added to the existing playlist, it is automatically reflected in the embedded instance.

Selecting the Correct Size for Your Embed

IBM Video Streaming recommends using the embed generator tool to configure the correct size for your embed. While there is flexibility in embed sizing, certain dimensions preserve the correct look and feel of the player and sidebar better than others.

The dashboard embed generator calculates the correct embed dimensions for you when you enter the desired height or width as a starting point.

Selecting the Correct Size for the Player

The player will not stretch, squeeze, or otherwise distort your video. Your video is always presented in its original aspect ratio, which is typically 16:9.

The player scales the video up or down to the maximum size possible within the embed dimensions while preserving the original aspect ratio.

If a player is embedded in a non-standard aspect ratio, black bars appear on the top or sides of the video so it can still display correctly.

If you use the sizing tool in either embed screen, it always calculates the correct 16:9 aspect ratio. The embed configuration tools do not calculate other ratios, but you can determine those manually.

Example: 640 x 360 is a 16:9 aspect ratio. If you enter a width of 640 in the embed configuration tool, it fills in a height of 360.

Consider these examples:

• 640 x 360 Embed: The video fills the entire frame.
• 750 x 360 Embed: Black space appears on the sides of the video because the dimensions do not match the proper aspect ratio.

Embedding a Responsive Player

Follow these steps to create a responsive embed:

• Get the player embed code described above and paste it into an HTML page.
• Set the width and height attributes of the iframe tag to 100%.
• Change the CSS position of the iframe tag to absolute and set the left and top properties to 0.
• Add a div container around the iframe tag as shown in the sample code below.

The value of the padding-bottom parameter is calculated from the aspect ratio of the content. For example, 9/16 = 0.5625.

<div id="Container"
  style="padding-bottom:56.25%; position:relative; display:block; width:100%">
  <iframe width="100%" height="100%"
    allowfullscreen webkitallowfullscreen
    src="https://video.ibm.com/embed/1524?html5ui=1"
    frameborder="0"
    style="position:absolute; top:0; left:0">
  </iframe>
</div>

Setting the Autoplay and Mute Parameters

You can configure your player to start playing automatically when the page loads. You can also choose to have the player start muted by default.

Combining these options is useful if you want a video to play automatically without startling visitors with sound.

Use the checkboxes in the embed configuration screen to toggle these settings. The code in the text box updates automatically.

NOTE: Autoplay is often blocked by browser policies, even if you select the autoplay parameter. IBM Video Streaming cannot override browser autoplay policies. Refer to your browser's support documentation for more information.

Hiding Embed Codes and Restricting Where Your Player Can Be Embedded

Administrators and account owners can hide their channel page, remove embed codes from the player, and restrict where the stream can be played.

Combining all three options gives you complete control so that the stream, and any subsequent recorded videos, only play on the pages you designate.

Restrict URLs Where Your Channel Can Be Embedded

Use this setting to allow the stream and recorded videos to play only on the domains or pages you specify.

This option is found under Security settings. From the Security page, click Settings for Restrict embed URLsSettings.

Disable Channel Page on IBM Domain

If you only want the player on your own website and do not want viewers watching from your channel page on the IBM domain, you can disable the channel page. This option is found under  Channel page settings.

Remove Embed Codes from the Player

On the Sharing settings page, you can remove the sharing menu from the player. Click Edit settings for Social sharing for viewers. 

Uncheck the box for Enable social sharing on this channel. This prevents users from obtaining the embed code and from sharing the channel page link on Facebook and Twitter.

Troubleshooting Problems with Embedding Your Player

Most of the time, embedding is as simple as copying and pasting the code onto your page. If you run into issues, review the common problems and solutions below.

I don't know where I'm supposed to paste the embed code

If someone else updates your website, copy and paste the embed code and send it to them.

Follow the instructions of your web content management system/platform for embedding your player.

The player doesn't appear at all

If you see a blank area where the player should be, your website may be sensitive to whether the player loads from HTTP or HTTPS.

Try adding http:// or https:// in front of the www in your embed code.

I embedded the player, but I can't view the stream

You need to host the player on a live webpage. If you are authoring your page in a local development environment and previewing pages from your local hard drive, the player will most likely not be able to pull a stream.

If you are still having trouble viewing the stream, refer to the viewing troubleshooting tips.