Position and style a persistent player

A persistent player is moved out of the page, into a container that AjaxPress keeps on screen while pages change around it. That’s what keeps it playing, but it also means the player leaves the spot your theme gave it. This page shows how to put it where you want it.

Where the player lives

After the first page, the player sits here, outside the page content:

<div id="ajaxpress-persist">                   <!-- position: fixed -->
  <div data-ajaxpress-lifted data-persist-key="live-radio">
    <!-- your player: the same live element, still playing -->
  </div>
</div>

Two things follow:

• It has to position itself. A player that relied on its place in the footer often ends up at the top of the screen instead.
• Styles that reached it through a parent stop applying, such as .site-footer .radio-player { … }, because it no longer has that parent.

Pin it in place

Give the player’s outer element its own fixed position. A bar along the bottom of the screen:

#radio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}

A small floating player in the bottom-right corner:

#radio-bar {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 320px;
  max-width: calc(100vw - 32px);
}

Put this CSS in Settings → AjaxPress → Advanced → Custom CSS. That CSS is applied exactly where the player lives.

Make room for it

The player now floats over your pages, so it can cover the bottom of their content, such as your footer’s last line or a cookie banner’s buttons. Add space at the bottom of every page in your theme’s CSS (Appearance → Customize → Additional CSS, or your child theme). Use the player’s height:

body {
  padding-bottom: 72px;
}

This one goes in the theme, not in AjaxPress Custom CSS: Custom CSS styles the player, and the theme styles your pages.

Restore lost styles

Rewrite any rule that depended on the player’s old parent so it targets the player directly:

/* Before: only applies inside the footer */
.site-footer .radio-player { background: #111; }

/* After: applies wherever the player is */
.radio-player { background: #111; }

To style the player only once it has moved, target it inside AjaxPress’s container. The data-persist-key is the key you set, or its id:

#ajaxpress-persist [data-persist-key="live-radio"] {
  box-shadow: 0 -2px 12px rgb(0 0 0 / 0.15);
}

Phones

Media queries work as usual. For example, a full-width bar on phones, and a corner player on larger screens:

#radio-bar { position: fixed; left: 0; right: 0; bottom: 0; }

@media (min-width: 768px) {
  #radio-bar { left: auto; right: 16px; bottom: 16px; width: 360px; }
}

Stacking

The player sits above your pages, in a layer of its own. Two consequences:

• It’s never hidden behind page content, however high a sticky header’s z-index is.
• Nothing on your pages can cover it, not even a popup or cookie banner with a huge z-index, because those live inside the page, underneath the player’s layer. If a banner or chat button sits where the player is, move one of them, or make room for the player.

The spinner, if you use one, covers the player for the moment a page loads.

Visible but not clickable?

Some page builders add visibility: hidden, opacity: 0 or pointer-events: none to sticky or animated sections, and the player keeps them after it moves. Override them:

#ajaxpress-persist [data-ajaxpress-lifted] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

More fixes are in My player stopped working.