The sticky footer player (<podcast-footer>) must be present in your site’s base template for cross-page persistence.
Adding the Footer
Add this element just before the closing </body> tag in layouts/_default/baseof.html:
Framework Attributes
The data-turbolinks-permanent, data-turbo-permanent, and hx-preserve attributes ensure the footer survives page navigation when using these frameworks:
| Framework | Attribute | What it does |
|---|---|---|
| Turbolinks | data-turbolinks-permanent | Prevents Turbolinks from replacing the footer on navigation |
| Turbo | data-turbo-permanent | Prevents Turbo Drive from morphing/replacing the footer |
| htmx | hx-preserve | Tells htmx to preserve the element during DOM swaps |
If you don’t use any of these frameworks, omit those attributes: the footer will still persist via sessionStorage for vanilla page loads.
How Persistence Works
The player survives page navigations using multiple strategies:
- Framework hooks:
data-turbolinks-permanent/data-turbo-permanent/hx-preservekeep the footer DOM element alive during SPA navigations - sessionStorage fallback: State saved to
sessionStorageonbeforeunload, restored on next page load - Vanilla HTML: Traditional page loads restore position, volume, mute, and speed from
sessionStorage
State Saved
| Field | Description |
|---|---|
currentTime | Playback position in seconds |
paused | Whether audio was paused |
volume | Volume level (0–1) |
muted | Mute state |
playbackRate | Playback speed multiplier |
Position Restore Rules
- Exact URL match: Position only restored when the saved
srcmatches the current element’ssrc - Staleness guard: Positions older than 1 hour are discarded
- Paused-state estimation: If audio was paused, position is restored as-is
- Playing-state estimation: If audio was playing, elapsed time since save is added
- Deferred to
loadedmetadata: Position set only after browser reports audio duration
Theme Toggle Integration
If your site has a dark/light theme toggle, make sure the footer’s CSS custom properties respond to your theme switching. The <podcast-footer> element responds to these selectors automatically:
If your theme uses different attribute names (e.g., body.dark or [color-scheme="dark"]), add your own rules:
Example: Full baseof.html Footer Section
Next Steps
- Configure per-episode front matter for podcast RSS
- Set up site-wide defaults for all players
- Explore source adapters for AzuraCast and iVoox