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:

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.