# Media Players: keep your site’s player playing

> Let AjaxPress find your player, or name it with a CSS selector, and it keeps playing across pages. Check my player shows what AjaxPress sees. (Pro)

Source: https://arraystory.com/docs/ajaxpress/media-players/

With the free plugin, you keep a player running by adding `data-ajaxpress-persist` to its HTML. When a theme or plugin prints the player and you can't edit it, the **Media Players** screen does the same job from the settings.

Open it from the sidebar: **Settings → AjaxPress → Media Players**. Keeping a player this way needs [AjaxPress Pro](https://arraystory.com/docs/ajaxpress/ajaxpress-pro/). **Check my player** is free for everyone.

Read [Keep audio or video playing across pages](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/) first. In particular, the player has to be on every page.

## Let AjaxPress find it (auto-detect)

![Turn on Auto-detect Media Players, and AjaxPress finds the player on every page and keeps it playing.](https://r2.arraystory.com/docs/ajaxpress/media-players-auto-detect.mp4?v=19b5e82687)

Turn on **Auto-detect Media Players** (Pro, beta). AjaxPress looks for audio, video and common radio and podcast embeds, such as Sonaar, AudioIgniter, Spreaker, Zeno.FM, Radio.co, SoundCloud and Mixcloud. A player that shows up on more than one page, like a radio bar in your header or footer, is part of your site, so it keeps playing as visitors browse. A player on a single page, like an episode embedded in one post, is page content and is left alone.

With auto-detect on, the screen lists what it found under **Detected players**: the ones **kept playing across pages**, and the ones **on one page only**. **Scan again** reads your pages afresh after you change your site.

A player that your theme builds with JavaScript after the page loads won't show up in the scan. If yours isn't kept, turn auto-detect off and list it by hand.

> [!NOTE]
> Auto-detect needs AjaxPress 2.5 or later alongside AjaxPress Pro.

## Check my player

![Check my player reads a few pages of your site, finds the player that appears on every page, and adds it to Media Players.](https://r2.arraystory.com/docs/ajaxpress/check-my-player.mp4?v=e34af26d31)

With auto-detect off, **Check my player** sits under the selector list. It reads your home page and a few more pages, and tells you:

- **Already kept across pages**: players that are marked or listed already.
- **On more than one page**: most likely your site player. These restart on every click until you add them.
- **On one page only**: probably page content. Add one only if it's your site player.

Tick the players you want and choose **Add to Media Players**, then **Save Settings**. Running the check is free; adding what it finds is Pro.

If a player has no id or class to point at, the check says so. Add `data-ajaxpress-persist` to it in your theme instead.

## List players by hand

Turn auto-detect off to name players yourself with a CSS selector. The steps below find the right one.

### Find the selector

1. Open a page with the player, right-click the player, and choose **Inspect**.
2. The browser's developer tools open with an element highlighted. Move up the tree until the highlighted area covers **the whole player**: the play button, the title, the volume control, the artwork.
3. Look at that element's attributes. If it has an `id`, such as `id="sticky-player"`, your selector is `#sticky-player`. If not, pick a class only it has: for `class="radio-player-bar"`, the selector is `.radio-player-bar`.

Prefer an `id` when there is one. It's the most reliable.

### Check it matches exactly one element

In the same developer tools, open **Console**, and run:

```js
document.querySelectorAll('#sticky-player').length
```

| Result | Meaning |
| --- | --- |
| `1` | Right |
| `0` | It matches nothing. Check the spelling, and whether you're on a page with the player |
| `2` or more | Too broad. AjaxPress would carry more than the player. Use a more specific selector |

Check on two or three different pages. Some themes change classes from page to page.

### Enter it

Type the selector into the **Media Players** field, and **Save Settings**. For more than one player, put each selector on its own line, or separate them with commas:

```text
#sticky-player
.podcast-dock
```

### Avoid broad selectors

The help tooltip mentions `audio` and `video` as examples. They work, but they catch *every* audio or video element on every page, including a podcast episode embedded in a blog post, which then gets lifted out of the post and kept playing. Name the one player you mean instead.

## Then finish the setup

- **Give it a stable identity**, if you can reach its HTML, with `data-persist-key`. Otherwise AjaxPress uses its `id`, then the address of the media inside it. See [Step 2](https://arraystory.com/docs/ajaxpress/keep-audio-or-video-playing-across-pages/#step-2-give-the-player-a-stable-identity).
- **Let it position itself.** See [Position and style a persistent player](https://arraystory.com/docs/ajaxpress/position-and-style-a-persistent-player/).
- **Test it** on five or more pages, with Back and Forward.

Selectors for popular player plugins are in the [player recipes](https://arraystory.com/docs/ajaxpress/player-setup-recipes-for-specific-plugins/).

## For developers

Add selectors from a theme or plugin with the `persistSelectors` filter, instead of the setting. See the [JavaScript extension API](https://arraystory.com/docs/ajaxpress/javascript-extension-api/#persistselectors).