Keep a video or live stream embed 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 first.

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:

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

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

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.