Browse AjaxPress docs

Media Players: pick a player with a CSS selector

Updated September 29, 2026 2 min read
View as Markdown Plain text version of this page Open in ChatGPT Ask questions about this page Open in Claude Ask questions about this page llms.txt Index of all docs, for AI tools
On this page

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, Media Players does the same job from the settings: you name the player with a CSS selector.

It’s under Settings → AjaxPress → Advanced → Media Players, and needs AjaxPress Pro.

Read Keep audio or video playing across pages first. In particular, the player has to be on every page.

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
ResultMeaning
1Right
0It matches nothing. Check the spelling, and whether you’re on a page with the player
2 or moreToo 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

Enter the player’s CSS selector under Advanced → Media Players, and it keeps playing on every page.

Type the selector into Media Players, and Save Settings. For more than one player, separate the selectors with commas:

#sticky-player, .podcast-dock

Use commas, not new lines. Selectors on separate lines without commas are read as one selector, and match nothing.

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.