> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/en/userguide/player/displayer.md).
# Displayer
A player built to show products and content. Add short-form videos to product detail pages to show what photos can't. One great video says more than ten photos!
## Step 1. Player settings
1. Go to \[Sidebar] > \[Displayer tab] > \[Player Settings] and turn the toggles on or off to apply the settings you want.
2. After you change the Displayer settings, click **\[Save and Update]** to save them.
{% hint style="info" %}
**Recommended settings**
* I want to hide the playback controls and show a clean, photo-like video **→ Control Bar off**
* I want the video to start as soon as the page opens, without anyone clicking play **→ Autoplay on**
* I want the video to keep playing after it ends **→ Loop on**
* I want to set the video width with a number **→ Auto Fit off, then enter the size**
{% endhint %}
{% hint style="warning" %} **Some settings update automatically when you save, and some don't!**
**Control Bar, Autoplay, Loop** ➡️ Update automatically when you click Save. You don't need to replace the code.
**Auto Fit** ➡️ Click Save, then replace the code too.
{% endhint %}
## Step 2. Copy the code or link
Once you've saved your player settings, it's time to try it out! You can use the Displayer by copying its code or link.
### Copy from the Library list
### Copy from the sidebar
Click the video you want in the video list. You can copy the code and link for each player at the top of the sidebar.
## Step 3. Use it in your store
1. Click **Copy Code** and paste the code into your HTML editor.\
(The editor you use depends on your store and platform.)
2. Use the editor's preview to check how the Charlla Displayer looks.
3. Add any other elements to your store page and save your changes.
[**Is the Displayer not centering properly? Check this setting -> Learn more**](/en/userguide/library/oepn_sidebar/tap_dis.md#videofit)
[**Did the code you pasted disappear? Try using a video tag instead -> Learn more**](/en/userguide/library/copy_url.md#videotag)
---
# 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://support.charlla.io/en/userguide/player/displayer.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
