Embedding into your site

Embedding video#

Owncast supports embedding your video stream directly into any other web site or source without having to setup a player.

The video-only URL to your stream content lives at: http://your.host/embed/video.

Here’s some example HTML you can use.

<iframe
  src="https://your.host/embed/video"
  title="Owncast"
  height="350px" width="550px"
  referrerpolicy="origin"
  scrolling="no"
  allowfullscreen>
</iframe>

It will look something like:

Using the HLS feed#

As long as the player supports it, it is recommended to open the homepage of your Owncast instance directly. The player will automatically find the correct playlist and will start playing. This will guarantee forward compability if the way how Owncast publishes HLS is ever changed.

However, if you really need the HLS feed (i.e. for sharing your stream to OpenSlides), you can access the HLS feed directly via this URL: http://your.host/hls/stream.m3u8.

Embedding chat#

Owncast supports embedding your chat directly into any other web site or source.

There are two types of embed chats: A read-only chat which only shows the messages and a standalone chat which has the same functionality as the one within the main Owncast web interface.

Embedding standalone chat#

The standalone chat URL lives at: http://your.host/embed/chat/readwrite.

It will look something like:

Embedding read-only chat#

The read-only chat URL lives at: http://your.host/embed/chat/readonly.

One common use of read-only chat is adding the chat messages to your broadcasting software, such as a web layer in OBS.

Using OBS#

1. Click the + or right mouse click to add a new source. Choose Browser from the list.

2. For a new source, you will need to add the name. Type in “Chat”.

3. In the Browser Source settings, you will need to change the URL to your Owncast instance’s /embed/chat/readonly url.

4. You can use the Custom CSS to tweak how the browser shows in your video. The following example will add some space around the box, give it a semi-transparent dark background; and increase the overall font size to a base unit of 24px. You may change any of these settings to fit your presentation layout. Note that the overall message text color is white.

      html {
      margin: 0px;
      padding: 20px;
      background-color: rgba(0,0,0,0.5);
      font-size: 24px;
      }
      

5. Click ‘OK’ to save your chat settings and re-position the new chat source in your scene.

SSL Requirements#

Embedding Owncast content that is not served via HTTPS will be blocked by browsers if you embed it within a page that is using SSL. Learn how you can use a SSL Proxy to fulfill this browser requirement as well as secure your Owncast site.