---
title: "Local Livestreaming"
canonical: "https://docs.pbs.org/space/LLS/3571720/Local%20Livestreaming"
format: markdown
---
> Macro (toc)

> 📝 **Note that stations are responsible for complying with all applicable laws and **<u>**[PBS policies](https://dq4x88qhpf5qj.cloudfront.net/documents/PBS-Policy-Governing-Use-of-PBS-Content-in-Member-Station-and-Third-Party-Products-and-Services.pdf)**</u>** on platforms that display PBS livestreams.**

## Overview

<span style="color: #333333">PBS offers livestreaming capabilities </span>for your station’s broadcast (or for a separate dedicated feed that you can provide) in the <span style="color: #333333">PBS Video App, PBS.org, Station Video Portals and embed players. PBS also offers an option for your station to opt-in to a PBS-provided national feed. </span>

<span style="color: #333333">For the latest Local Livestreaming documentation, please see the </span><span style="color: #333333">[PBS Hub](https://hub.pbs.org/local-livestreaming/local-livestreaming-in-pbs-video-app-and-web-players)</span><span style="color: #333333">. If you do not have access to the Hub, please </span><span style="color: #333333">[submit a support ticket](https://digitalsupport.pbs.org/support/tickets/new)</span><span style="color: #333333"> requesting access.</span>

<span style="color: #333333">For stations managing their livestreaming feeds, please review the </span><span style="color: #333333">[Livestream Manager Console documentation](https://docs.pbs.org/space/LLS/3577299/Livestreaming+Console)</span><span style="color: #333333">.</span>

## Implementing the livestream feed

There are two ways you can implement the livestream feed:

- [Embeddable livestream player in Station Manager](https://docs.pbs.org/space/SM/5046330/Console#Livestream-feeds) - A simpler implementation for stations that do not have a Station Video Portal ([request a station video portal](https://digitalsupport.pbs.org/support/tickets/new))
- [iFrame with custom CSS](https://docs.pbs.org/space/LLS/3571720/Local+Livestreaming#How-to-place-a-livestream-feed-on-your-station-site) - A custom implementation for stations that have a station video portal

## How to place a livestream feed on your station site

The following instructions show how to add the iFrame with custom CSS that displays the player plus the schedule grid. A basic understanding of HTML and CSS is required to implement this.This section shows you how to use an iFrame with custom CSS. 

### Prerequisite

In order to use the iFrame option, your station needs the Station Video Portal (SVP) enabled. To request a station video portal, [submit a support ticket](https://digitalsupport.pbs.org/support/tickets/new).

### What’s included

This iFrame feature includes the livestream player plus the schedule grid. A basic understanding of HTML and CSS is required to implement this. 

The UI is the same as displayed on [pbs.org/livestream](http://pbs.org/livestream) with the addition of light and dark options from which you can choose. [Learn more about themes](https://docs.pbs.org/space/LLS/3571720/Local+Livestreaming#Light-and-Dark-Themes)

Analytics will be included in the ‘Station Player’ data in Domo.

### How to add the iFrame to your site

- Using the site building tool you are familiar with, go to the page on your website where you can insert custom HTML.
- Go to the place where you want the livestream to display and insert the following code:

```html
<iframe
allow="geolocation; encrypted-media"
allowfullscreen=""
class="livestream-iframe"
src="https://INSERT SVP URL HERE/livestream/iframe/"
></iframe>
```

Add custom CSS to control the size of the iFrame in a responsive manner. This may mean using an inline `<style>` tag or adding it to an external CSS file. You’ll need to find the appropriate value for the “--schedule-offset” across breakpoints. This may require some experimentation and will vary depending on how many subchannels you have. It will look like this:

<details>
<summary>View a guide to the CSS</summary>

![livestreaming-css-guide.jpg](media://54a40794-c67a-4f5a-854b-7844269c085f)
</details>

```css
.livestream-iframe {
--schedule-offset: 400px;

  display: block;
  margin: 0 auto;
  border: 0;
  height: calc(56.25vw + var(--schedule-offset));
  width: 100%;
  max-width: 1720px;
}

@media (min-width: 850px) {
  .livestream-iframe {
    --schedule-offset: 550px;
  }
}  

@media (min-width: 1120px) {
  .livestream-iframe {
    --schedule-offset: 600px;
  }
}   

@media (min-width: 1300px) {
  .livestream-iframe {
   height: 1200px;
  }
}   
```

### Linking directing to channels in the iFrame

Like on pbs.org, you can create links that go directly to your channel. Follow this URL string:

```html
https://INSERT SVP URL HERE/livestream/iframe/?selected=ga-CHANNEL
```

The relevant “CHANNEL” would be in this format:

- ga-main
- ga-create  [for linking National Create]
- ga-world     [for linking National WORLD]
- ga-nhk
- ga-fnxga-local-subchannel-1  [for your first local subchannel, including local Create or WORLD]
- ga-local-subchannel-2  [for your second local subchannel, including local Create or WORLD]

### Light and Dark Themes

<details>
<summary>View light and dark examples</summary>

| **Light** | **Dark** |
| --- | --- |
| ![livestreaming-light.jpg](media://7f759df7-2b9d-410c-99f9-d5d99879a8d0) | ![livestreaming-dark.jpg](media://11f00680-66c7-487a-ae39-5bb25927243a) |
</details>

The iFrame includes the option to set a light or dark theme. By default, it displays with the same dark treatment that is on pbs.org. 

If you choose to keep the dark version, we suggest that your webpage is set with a background color of #000525 for a seamless experience. For the light version, we suggest that your webpage is set with a background color of #ffffff for a seamless experience. 

If you choose to change to the light version of the schedule iFrame, you need to append */?theme=light* to the end of the src line in your code, as displayed below:   

```html
<iframe
  allow="geolocation; encrypted-media"
  allowfullscreen=""
  class="livestream-iframe"
  src="https://INSERT SVP URL HERE/livestream/iframe/?theme=light"
></iframe>
```