Resources / Tutorials / HTML

How do I Embed a Video on my Website?

Assuming you already have a Zidivo account, the first thing you need to do is Upload a Video.

Once you have uploaded a video to your account, you need to Create a Campaign. A campaign pulls together your video along with any specific settings (like geo-restrictions) and the player of your choice so that it looks and behaves the way you want it to. This, then gives you the embed code you need to be able to embed a video on your website.

If you're live streaming, then the process for embedding is very much the same, only you need to Create a Channel in order to generate your embed code.

Regardless of whether you are streaming live or on-demand the options are the same, so from here we'll just refer to on-demand campaigns to keep it simple. 

Embed Code

You will find the code needed to embed your video in the same place for both live and on-demand - in step 4 of the setup wizard, location. You will see 3 options.

Publish on webpage: this option is used if you do not have your own website, and your selection here will be used for when you preview your video. It's a good idea to refer to this page if you have any issues with video once embedded on your website as generally, if it works here then the issue is on your website rather than with the video.

Get Script: This is the JScript for embedding your player. It is the more technical way of adding video to your website, but it is also more robust. The script tags should be placed in the <head>  of your website and the embed code in the <body> where you would like the player to appear.
While every website is a little different, depending on whether you are using a page builder, if you have access to edit the HTML you should end up with something that looks a little like this... 
Get Iframe: This is a more simple and flexible option for adding your video to your website (and other places that allow HTML input). It is a good option if you're new to code or have limited access to the design of your website. Just copy and paste the code into the body where you would like the video to appear.
If you follow these instructions, you should end up with something that looks a little like this...
If you experience any playback issues, you can check out our playback troubleshooting guide here.

Fullscreen

To enable your video to play in fullscreen, add the allowfullscreen parameter to your iframe, like this...

Background Image

If you are live streaming, you may want to use a holding image so there is something to show when you are not actively streaming. Most popular encoders (including OBS, Wirecast & vMix) have built in options for this. But there may be scenarios where you need to completely shut off your encoder. In this situations, it's simple to add a holding image using HTML to place the iframe in a <div> and setting a background image.
You can see in this example below, that by using a hosted gif you can get a really good result without needing to run your encoder continuously. Then, if for any reason your stream goes down or the content is restricted to a viewer, they get more than just an error code.

30 day free trial

Our 30 day free trial includes access to all features as well as 5GB to get you started. No obligation and no cards required. Just reach out if you want to discuss any aspect of your streaming project.
lockenvelope linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram