Knowledge Base/Managing your channel

How to embed a stream or video on your site

posted this on November 19, 2012, 10:44 AM

How to embed a stream or video on your site

All Ustream accounts allow you to embed your live channel player, a recorded video or highlight, or the player sidebar which includes the chat and social stream on your own site or blog. Ustream Pro Broadcasting accounts provide additional features around embedding. This article covers where to find and how to use the different embedding features on Ustream.

Getting the embed code from a Ustream player

The simplest way to get the embed code for any Ustream live video or recorded video player is the following. For more advanced options, use the Ustream 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 icon that looks like an HTML bracket

Copy and paste the code that you will see in the lower portion of the pop up box. You can customize the size using the interface and the code will update.

Ustream Dashboard embed page

Log in to your Ustream account, or create a new one if you don't have an account yet.

Screen Shot 2014-12-13 at 10.21.30 AM.png

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.



Embedding the Sidebar

Free accounts can embed the chat or Social Stream via the sidebar. Enterprise level Pro Accounts 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.




Selecting the correct size for your embed

We recommend using Ustream'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. Both embed generator tools -- the one in the player and the one in the dashboard -- 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 Ustream 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 Ustream 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. The Ustream title / control bar on the bottom of the player is 32 px high. If you use the sizing tool in either of our embed screens, it will always calculate the perfect 16:9 aspect ratio + add 32px for the control bar. The embed configuration tools do not calculate for any other ratios besides 16:9, but you can easily calculate the appropriate size yourself. The Ustream player control bar is always 32 pixels high, so calculate an aspect ratio that matches your video stream and add 32px to the height to know the correct size for your embed.

640 x 360 is a 16:9 aspect ratio.
+ 32 px to height for control bar
Ustream player size = 640 x 392

If you enter 640 width in either of the Ustream embed configuration tools, it will fill in a height of 392.

Let's look at two examples of a player. One is embedded in the correct size: 640 x 392. If you look at the screenshot of the embedded player, you will notice the video fills the entire frame.

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.

Setting the Autoplay and Mute paramters

The embed configuration interface offers additional options for Ustream 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.

Hiding your embed codes and restricting where you player can be embedded

Ustream Pro Broadcasters have the option to hide their Ustream 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 site

If you only want to have the player on your own site and don't plan to have anyone watch on your 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 Ustream channel page on Facebook and Twitter.


Troubleshooting problems with embedding your Ustream 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 Ustream 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.

Topic is closed for comments