Media Players: keep your site’s player playing

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. Check my player is free for everyone.

Read 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 (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.

Check my player

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:

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:

#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.
• Let it position itself. See 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.

For developers

Add selectors from a theme or plugin with the persistSelectors filter, instead of the setting. See the JavaScript extension API.