Embed Owncast Into Your Website

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://owncast.example.com/embed/video.

Here's some example HTML you can use.

<iframe
  src="https://owncast.example.com/embed/video"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allowfullscreen
>
</iframe>

It will look something like:

Autoplay

Whether an embedded video starts playing on its own follows your server's autoplay setting. You can override it for a single embed by appending ?autoplay= to the URL with one of off, always, or sound-only. An unrecognized value falls back to the server setting.

Most browsers block autoplay inside an iframe on another site unless the embedding page grants permission with the allow attribute:

<iframe
  src="https://owncast.example.com/embed/video?autoplay=always"
  title="Owncast"
  height="350px"
  width="550px"
  referrerpolicy="origin"
  allow="autoplay"
  allowfullscreen
>
</iframe>

Muting

If you would like the player to be muted once it starts playing, append ?initiallyMuted=true to the URL. Viewers can still unmute manually. Combine parameters with &, for example ?autoplay=always&initiallyMuted=true.

One interaction to know about: sound-only never starts silently, so combining it with initiallyMuted=true means the player will not autoplay at all.

Hiding the follow button

If your server has social features enabled, the embedded player offers a follow button. Hide it for a single embed by appending ?supportsSocialFollow=false to the URL. Any other value keeps the button.

Customizing the Embedded Stream Styling

You can easily customize the styling of the embedded Owncast stream to match your website's design by applying CSS styles. Here's how you can do it:

Create a CSS File: First, create a CSS file (e.g., stream-styles.css) where you'll define your custom styles.
Link the CSS File: In the <head> section of your HTML document where you embed the Owncast stream, add a <link> tag to include your CSS file. Make sure to add this line before the closing </head> tag:
```
<link rel="stylesheet" href="path/to/stream-styles.css" />
```
Replace "path/to/stream-styles.css" with the actual path to your CSS file.

Apply Styles: Customize the styles in your stream-styles.css file according to your preferences. You can target the <iframe> element using CSS selectors, as shown in the example below:

/* Style the embedded stream's iframe box */
iframe[title="Owncast"] {
  border: none; /* Remove the iframe border */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
  border-radius: 10px; /* Rounded corners for a modern look */
  overflow: hidden;
  margin: 0 auto; /* Center the iframe horizontally */
}

Customize to Your Needs: Adjust the values above to match your website's design and layout.

The embedded stream is a separate page loaded from your Owncast server, so your site's CSS can only style the <iframe> box itself, not the content inside it. To change the colors, fonts, and layout inside the player, use the appearance settings on your Owncast server instead.

Following these steps, you can seamlessly integrate your Owncast stream into your website while maintaining control over its visual appearance.

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.

Embedding chat

Owncast supports embedding your chat directly into any other website 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://owncast.example.com/embed/chat/readwrite. It is the full chat: viewers get a name and can send messages, subject to the same chat rules as your main page.

<iframe
  src="https://owncast.example.com/embed/chat/readwrite"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

It will look something like:

Owncast Embed

Embedding read-only chat

The read-only chat URL lives at: http://owncast.example.com/embed/chat/readonly. It shows messages only, with no input for sending them.

<iframe
  src="https://owncast.example.com/embed/chat/readonly"
  title="Owncast chat"
  height="500px"
  width="350px"
></iframe>

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

Click the + or right mouse click to add a new source. Choose Browser from the list.
For a new source, you will need to add the name. Type in "Chat".
In the Browser Source settings, you will need to change the URL to your Owncast instance's /embed/chat/readonly url.
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);
  font-size: 24px;
}

#chat-container {
  background-color: rgba(0, 0, 0, 0.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.