All IBM Video Streaming 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. This article covers where to find and how to use the different embedding features on 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 the following. For more advanced options, use the IBM Video Streaming 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.
IBM Video Streaming Dashboard embed page
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 Embedding.
Now you will see the embed options screen:
Once you get to the Embed Codes page, choose between Player, Interactivity, Combined or Playlist 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.
Embedding the Sidebar
Broadcasters can get the fully functional sidebar including a video gallery widget, Chat and Q/A. 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.
Video playlist embed
Another new feature for embeds from IBM Video Streaming, content owners can also embed video playlists onto websites as well. This embedded experience features the video player on the left and the playlist navigation on the right. When interacting with the playlist, viewers can see a list of both the content available and are also able to jump to a video of their choosing.
Naturally this feature also works with Dynamic Video Playlists as well, which are a type of playlist that are created based on matching metadata criteria. For example, a playlist could be setup that contains all videos tagged with a particular speaker or that are part of the same genre. Not only will the playlist auto populate based on the criteria, but will automatically stay updated as well. This means that if another video was added to the account that featured the same speaker or was part of the same genre it would be automatically added to the playlist as well and reflected in the embedded instance. Due to the Video Metadata Editor that allows for custom metadata, there are tons of different categories that content owners can create and use to make dynamic playlists too.
-
Playlist
Offers the ability to embed a video playlist which must include a side panel with both the info tab and playlist navigation inside of it. Click here for more information on creating a Video Playlist from the Dashboard.
Selecting the correct size for your embed
We recommend using IBM Video Streaming'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.
Example
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>
Setting the Autoplay and Mute parameters
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.
Hiding your embed codes and restricting where your player can be embedded
Administrators and account owners 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
Disable channel page on IBM Domain
If you only want to have the player on your own site and don't plan to have anyone watch on your channel page from the IBM Domain, you can disable the channel page from the Channel page section.
This option is found under Channels > Channel page:
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.
Troubleshooting problems with embedding your player
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.