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:

Embedded videos will not start playing before the user presses the play button. This means that no sound will appear when a page with an embedded video is loaded. If you would like the player to additionally be muted once it does start playing, you can append ?initiallyMuted=true to the URL (so it looks something like http://your.host/embed/video?initiallyMuted=true). Users will still be able to unmute the video manually once it’s playing.

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 compatibility if the way how Owncast publishes HLS is ever changed.

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

Mute by default#

If you’d prefer your embedded video to be muted by default, you can add ?initiallyMuted=true to the end of the /embed/video URL.

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 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#

Embedded Owncast content that is not served via HTTPS within a page that is using SSL/TLS gets blocked by browsers. Learn how you can use a SSL Proxy to fulfil this browser requirement and secure your Owncast site.