> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/customize/settings/consolidated-playback-bar.md).

# Consolidated Playback Bar

***

### **What is the Consolidated Playback Bar?**

The Video Play Bar is a **redesigned control interface** that brings all demo navigation and playback controls into a single, unified bar at the bottom of your demo viewer.

This new layout mirrors the familiar experience of video players like YouTube or Vimeo, making it instantly intuitive for viewers. All controls now live in one place and appear only when you hover at the bottom of the demo.

{% @supademo/embed demoId="cmmb04ay6019r22c47jsbr81d" url="<https://app.supademo.com/demo/cmmb04ay6019r22c47jsbr81d>" %}

***

### **How to Use the Playback Bar**

1. **Hover at the bottom** of the demo to reveal all playback controls.
2. **Play/Pause** — Control demo playback.
3. **Mute/Unmute** — Toggle audio on or off.
4. **Arrow Keys** — Navigate through demo steps.
5. **CC** — Enable or disable subtitles.
6. **Language Icon** — Switch between available subtitle languages.
7. **Full-Screen** — Expand the demo for an immersive viewing experience.

> 💡 **Tip:** The playback bar automatically hides when not in use, keeping your demo content front and center.

***

### **Benefits**

* **Distraction-free viewing** — Viewers can focus entirely on the demo content.
* **Familiar UX pattern** — The video player-style bar is instantly recognizable.
* **Cleaner aesthetics** — A unified control bar creates a polished, professional appearance.
* **On-demand controls** — Controls appear only when needed via hover.
* **Improved accessibility** — All controls in one easy-to-find location.

***

### **Use Cases**

<details>

<summary><strong>Marketing and Website Embeds</strong></summary>

Embedding demos on landing pages or marketing sites? The consolidated playback bar keeps your demos visually clean and on-brand. Controls stay hidden until needed, letting your product take center stage.

</details>

<details>

<summary><strong>Sales Demo Leave-Behinds</strong></summary>

Share demos with prospects that feel polished and professional. The familiar video player interface makes it easy for anyone to navigate, replay, and share internally — no learning curve required.

</details>

<details>

<summary><strong>Customer Onboarding</strong></summary>

Help new users focus on learning your product, not figuring out demo controls. The intuitive playback bar reduces friction and lets viewers concentrate on what matters — the content.

</details>

<details>

<summary><strong>Live Presentations</strong></summary>

Running a demo for stakeholders or executives? Full-screen mode with hidden controls delivers a clean, presentation-ready experience that looks polished and professional.

</details>

***

> ✨ **The Result:** A viewing experience that puts your product first and controls second — exactly how it should be.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.supademo.com/customize/settings/consolidated-playback-bar.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.