> 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/library/oepn_sidebar/tap_dis.md).

# Displayer tab

## Change the video title <a href="#undefined" id="undefined"></a>

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2F2yAO21b8t4nc2zytmi8H%2Ftap_dis-1-en.png?alt=media" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FOith90wPHRn4o9dWlld1%2Ftap_dis-2-en.png?alt=media" alt=""><figcaption></figcaption></figure>

1. In \[Library] > \[Videos tab], click the video you want to edit.
2. When the \[Sidebar] opens, go to \[Displayer tab] > \[Video Title] and enter the title you want.
3. Click **\[Save and Update]**. The new title appears in the video list.

## Change the player settings

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FHWK0iCa0XDMS2QFuEHCM%2Ftap_dis-3-en.png?alt=media" alt=""><figcaption></figcaption></figure>

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]**. The player updates automatically on every page that uses this video's URL.

{% hint style="danger" %} <mark style="color:red;">**If you change the Auto Fit setting, you need to replace the player code or link.**</mark>\ <mark style="color:red;">**\[Sidebar] > \[Save and Update] > \[Link] button > \[Copy the Displayer code or link] > \[Paste it into your web page editor]**</mark>
{% endhint %}

### Control Bar

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2Fd9pcdrSrAAefQKroeT0C%2Ftap_dis-4-en.png?alt=media" alt=""><figcaption></figcaption></figure>

* Control Bar on: the control bar, with the play button, volume control, and more, appears over the video.
* Control Bar off: no playback or volume controls appear over the video. Use this when viewers don't need to control the video and you want it to look as clean as an image.

### Autoplay

{% hint style="danger" %} <mark style="color:red;">**When Autoplay is on, the video plays muted.**</mark>
{% endhint %}

* Autoplay on: the video starts as soon as the page loads, without viewers clicking play. It plays muted.
* Autoplay off: the video plays only when viewers click the play button.

### Loop

* Loop on: when the video ends, it starts again from the beginning without stopping.
* Loop off: the video stops when it ends. Viewers need to click play to watch it again from the beginning.

### Auto Fit

{% hint style="danger" %} <mark style="color:red;">**If you change the Auto Fit setting, you need to replace the player link.**</mark>\ <mark style="color:red;">**\[Sidebar] > \[Link] button > \[Copy the Displayer code or link] > \[Paste it into your web page editor]**</mark>
{% endhint %}

### Auto Fit off <a href="#videofit" id="videofit"></a>

Auto Fit is off by default.

{% tabs %}
{% tab title="Resize" %}

* You can set the video size by entering a number.
* Use the **\[Video Size Preview]** button below the video on the left to see how the size you entered looks.
* If you don't enter a size, the video's original size is used.
* You can enter a width from 200px to 1920px.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FYgAJGIgPrjE2D9c0frRD%2Ftap_dis-5-en.png?alt=media" alt=""><figcaption></figcaption></figure>

Turn Auto Fit off ➡️ change the width ➡️ click Save and Update ➡️ click **\[Copy Code]** at the top, and you're ready to go.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FoT4kShe2t3KTMPhItnCU%2Ftap_dis-6-en.jpg?alt=media" alt="" width="375"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Center Alignment" %}
**✅ Center Alignment checked**

* The Charlla player is automatically centered on the page.
* Your HTML editor's **text center alignment** option has no effect.

**Center Alignment unchecked**

* If you uncheck Center Alignment, the Charlla player is aligned to the left.
* You can then use your HTML editor's **text center alignment** option.

The result can vary depending on your store's theme and your commerce platform.\
Test it first, then save the setting that works best for your store.
{% endtab %}
{% endtabs %}

### Auto Fit on

Turn Auto Fit on to make the video fill a specific area.

* Use Auto Fit on when your theme or custom-built website already defines an area for the video.
* The video fits exactly to the width of that area.
* The size of the area is calculated automatically.
* You don't need to set a size in the Charlla player settings.

<figure><img src="https://1857767629-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fo7CC5HKFh1guYnGcyftj%2Fuploads%2FTxAgHUmCWab3UcyMkdfo%2Ftap_dis-9-en.png?alt=media" alt=""><figcaption></figcaption></figure>

Turn Auto Fit on ➡️ click Save and Update ➡️ copy the code, and you're ready to go.


---

# 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/library/oepn_sidebar/tap_dis.md?ask=<question>&goal=<user_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.
