All IBM Cloud Video accounts allow you to embed your live channel player or a recorded video, or the player sidebar which includes the chat and social stream on your own site or blog. Pro Broadcasting accounts provide additional features around embedding. This article covers where to find and how to use the different embedding features on IBM Cloud Video.
The simplest way to get the embed code for any live video or recorded video player is the following. For more advanced options, use the IBM Cloud Video dashboard embed page.
Hover over the video player and in the lower right corner click on the Share menu.
From the share menu, click on the Embed option.
Copy and paste the code that you will see in pop up box.
Click on your user icon in the top right of your screen and click on Dashboard from the drop down menu.
From the Channel menu, click on Embed.
Now you will see the embed options screen:
Once you get to the Embed Codes page, choose between Player, Social, or Combined and click on Create Embed.
Copy the code displayed in the text box and paste into an HTML page to embed the video player on your own site.
You can also grab your video embed code by going to Videos, clicking on the arrow tab to the right of the video and select the option Embed.
Free accounts can embed the chat or Social Stream via the sidebar. Pro Broadcasting Accounts (including Free trials) get the fully functional sidebar including a video gallery widget, Social Stream and Chat. As you change the options for your embed, the screen will show you a preview of what your embed will look like and the code will update to reflect the selected options.
We recommend using IBM Cloud Video's embed generator tool to configure the correct size for your embed. While you have a lot of flexibility in the size of your embeds, there are certain sizes that will work better than others to preserve the correct look and feel of the player and the sidebar. The dashboard embed generator tool will calculate the correct embed dimensions for you if you enter the desired height or width as a starting point.
Selecting the correct size for the player
The player won't stretch, squeeze or otherwise distort your video. Your video will always be presented in the aspect ratio it is streamed to us at -- typically, this is 16:9 aspect ratio. The player will scale up or down the video to the maximum size it can play at within the embed dimensions, while preserving the aspect ratio of the original video. Where a player is embedded in a non-standard aspect ratio, black sections will appear on the top or sides of the video in order for the video to be presented in its original format. If you use the sizing tool in either of our embed screens, it will always calculate the perfect 16:9 aspect ratio. The embed configuration tools do not calculate for any other ratios besides 16:9, but you can easily calculate the appropriate size yourself.
640 x 360 is a 16:9 aspect ratio. If you enter 640 width in the embed configuration tool, it will fill in a height of 360.
Let's look at two examples of a player. One is embedded in the correct size: 640 x 360. If you look at the screenshot of the embedded player, you will notice the video fills the entire frame.
640 x 360 Embed
If we embed the same player with the wrong dimensions -- 750px wide rather than 640px wide -- you'll notice the player now has black space on the sides of the video.
750 x 360 Embed
Embedding a responsive player
- Steps to create a responsive embed:
- Get the player embed code described above and paste into an HTML page
- Set the width and the height attributes of the iframe tag to 100%
- Change the CSS position of the iframe tag to 'absolute' and set the left and top CSS parameters to '0'
- Add a div container around the iframe tag as it is shown by the following sample code. The value of the 'padding-bottom' parameter is calculated from the aspect ration of the content (e.g. 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="http://www.ustream.tv/embed/1524?html5ui=1" frameborder="0" style="position:absolute; top:0; left: 0"> </iframe> </div>
The embed configuration interface offers additional options for Pro Broadcasters. You can set your player to start playing automatically when the page is loaded. You can also opt to have the player start muted by default. It is useful to combine both of these options if you wanted to have a video play automatically on your page, but not have your site visitors be startled by the sound. Use the checkboxes in the embed configuration screen to toggle these settings and the code in the text box will update accordingly.
Pro Broadcasters have the option to hide their channel page, remove the embed codes from the player (so viewers cannot embed the player somewhere) and to also restrict where the stream can play. Combining all three of these options will allow you complete control that the stream (and any subsequent recorded videos) will only play on the page(s) you designate.
Restrict URLs where your channel can be embedded
Use this to only allow the stream and recorded videos to play on the domains or pages you specify.
This option is found under Channels > Security. From the Security page click on Settings
Do not display channel on Ustream.tv site
If you only want to have the player on your own site and don't plan to have anyone watch on your Ustream.tv channel page, check this box to remove the channel page from the Ustream site.
This option is found under Channels > Security:
Remove embed codes from the player
Not on the embed page, but under Channel > Sharing, you will find an additional option to remove the sharing menu from the player. This will prevent users from obtaining the embed code and also from sharing the link to the channel page on Facebook and Twitter.
Most of the time, embedding is as simple as copying and pasting the code onto your own page and it should work automatically. If you are running into issues, here are some of the common problems and solutions.
- I don't know where I'm supposed to paste this code!
- If you have someone who updates your website for you, just copy and paste this and send it to them and they will know what to do with it. If you use Wordpress, here are instructions for embedding your player on Wordpress. If you don't use use Wordpress, but use another blogging or content management platform, usually you'll need to make sure you are editing in HTML mode (not a rich text / WYSIWYG editor), paste the code there and publish your page or post.
- The player doesn't appear at all. I see a blank area where the player should be.
- Some sites will be sensitive to the player loading from http or https. Try adding http:// or https:// in front of the www on your embed code.
- It looks like 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 the pages loaded 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, please see our viewing troubleshooting tips.