# Keep a video or live stream embed playing

> Keep a YouTube, Vimeo, Twitch or live radio embed playing while visitors browse, in a sticky video box or bar.

Source: https://arraystory.com/docs/ajaxpress/keep-a-video-or-live-stream-playing/

The same technique that keeps a radio player going works for embedded video and live streams: a YouTube or Vimeo video, a Twitch or YouTube live stream, or a Shoutcast or Icecast player. The embed keeps playing while visitors move between pages.

This page covers what's different about embeds. Read [Keep audio or video playing across pages](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/) first.

![A marked video keeps playing in its corner while the visitor browses.](https://r2.arraystory.com/docs/ajaxpress/keep-video-playing.mp4?v=17da1a8135)

## It has to be on every page

A video inside one post's content stops when the visitor leaves that post, because that content is exactly what changes. A video that keeps playing has to be part of every page: a sticky video box in the corner, a "live now" bar in the footer, or a stream in a site-wide widget area.

A good pattern: put the live stream in your footer, in a small fixed box, on every page.

## Wrap the embed, and mark the wrapper

Don't mark the `<iframe>` itself. Wrap it, and put the marker and a fixed key on the wrapper:

```html
<div id="live-box" data-ajaxpress-persist data-persist-key="live-stream">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Live stream"
    allow="autoplay; encrypted-media; picture-in-picture"
    allowfullscreen></iframe>
</div>
```

- The **wrapper** is what AjaxPress carries from page to page. It also gives you somewhere to put a title, a close button, and positioning CSS.
- The **`data-persist-key`** matters more for embeds than for anything else. Without it, AjaxPress recognises the embed by its address, and embed addresses often vary from page to page (a start time, a tracking parameter, a different `origin`). Then the video on the next page looks new, and you get two streams.

With AjaxPress Pro, you can use `#live-box` in [Media Players](https://arraystory.com/docs/ajaxpress/media-players/) instead of the `data-ajaxpress-persist` attribute, but add the key to the markup if you can.

## Position it

A small box in the bottom-right corner, full width on phones:

```css
#live-box {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 360px;
  aspect-ratio: 16 / 9;
}
#live-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 600px) {
  #live-box { left: 0; right: 0; bottom: 0; width: auto; }
}
```

Add it under **Settings → AjaxPress → Advanced → Custom CSS**. See [Position and style a persistent player](https://arraystory.com/docs/ajaxpress/position-and-style-a-persistent-player/) for more.

## What to expect

- **The embed can reload once, as the first page finishes loading.** That's when AjaxPress moves it into place, and moving an embed restarts it. It happens before most visitors press play. After that, it's never reloaded again.
- **It keeps playing across every page that includes it**, with Back and Forward too.
- **On a page without it, it stops**, and it's removed. That's how you keep it off certain pages.
- **A normal page load restarts it**, as with any player: a reload, a link to another site or wp-admin, or an [excluded link](https://arraystory.com/docs/ajaxpress/exclude-links/).

## Autoplay

Browsers block sound until the visitor has interacted with the page. An embed set to autoplay usually starts muted, or not at all, until the visitor clicks play. AjaxPress can't change that, and once the visitor has started it, it keeps going.

## Checklist

- The embed is in a global area, on every page where it should keep playing.
- The wrapper is marked, not the iframe.
- The wrapper has a `data-persist-key`.
- It has its own `position: fixed` CSS.
- Tested on five or more pages, with Back and Forward, and on a phone.