> 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/userguide/player/displayer.md).

# Displayer(디스플레이어)

## Step 1. 플레이어 설정

1. \[사이드바] > \[디스플레이어 탭] > \[플레이어 설정]에서 토글을 On/off 하여 원하는 설정을 적용하세요.
2. 디스플레이어 설정을 수정한 후 **\[저장 및 업데이트] 버튼**을 눌러 설정을 저장해 주세요.

<figure><img src="/files/E1ItHVfRHjsmDQGBq2O1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**권장설정**

* 불필요한 재생 컨트롤 바를 숨기고, 사진 같은 깔끔한 동영상을 원해요 **→ 컨트롤 바 off**
* 재생 버튼을 누르지 않아도 페이지를 켜자마자 동영상이 재생되길 원해요 **→ 자동 재생 on**
* 동영상이 끝나도 멈추지 않길 원해요 **→ 반복재생 on**
* 동영상 가로 크기를 숫자를 입력해서 조절하고 싶어요. **→ 동영상 채우기 off 후 크기 직접 입력**
  {% endhint %}

{% hint style="warning" %} <mark style="color:red;">**저장하면 자동 업데이트되는 설정, 아닌 설정이 있어요!**</mark>

**컨트롤바, 자동재생, 반복재생** ➡️ 저장 버튼을 누르면 자동 업데이트 돼요. 코드 교체가 필요 없어요.

**동영상 채우기** ➡️ 저장 버튼을 누르고 코드도 교체 해야해요.
{% endhint %}

## Step 2. 코드 및 링크 복사

플레이어 설정을 저장했다면, 이제 직접 사용해 봐야죠! 디스플레이어는 코드 또는 링크를 복사해서 사용할 수 있어요.

### 라이브러리 목록에서 복사하기

<figure><img src="/files/m98RDmbRO1BAG7O4hMj6" alt=""><figcaption></figcaption></figure>

### 사이드바에서 복사하기

동영상 목록에서 설정을 원하는 영상을 클릭해주세요. 사이드바 상단에서 플레이어별 코드와 링크를 복사할 수 있어요.

<figure><img src="/files/WIpz7AcWUVrciemNqrai" alt=""><figcaption></figcaption></figure>

## Step 3. 쇼핑몰에 사용하기 <a href="#dis-apply" id="dis-apply"></a>

{% tabs %}
{% tab title="HTML 편집기에 사용" %}

1. 코드 복사를 클릭하여 얻은 코드를 HTML 편집기에 붙여넣어 주세요.\
   (사용하는 편집기는 쇼핑몰, 플랫폼별로 차이가 있어요.)
2. HTML 편집기 미리보기 기능으로 찰나 디스플레이어가 어떻게 표시되는지 확인해 주세요.
3. 쇼핑몰 페이지에 다른 요소를 추가하고 편집 내용을 저장하세요.

<figure><img src="/files/uwcsVFzfOqJeTeQx5Il9" alt=""><figcaption></figcaption></figure>

[<mark style="color:purple;">**디스플레이어 가운데 정렬이 잘 안되시나요? 이 설정을 확인해보세요 -> 자세히보기**</mark>](/userguide/library/oepn_sidebar/tap_dis.md#videofit)

[<mark style="color:purple;">**붙여넣기 한 코드가 없어졌나요? 비디오 태그로 변경해서 사용해 보세요 -> 자세히보기**</mark>](/userguide/library/copy_url.md#undefined-2)
{% endtab %}

{% tab title="\[카페24] 에디봇 사용" %}

1. 카페 24에서 상품 상세 페이지를 수정하는 **\[에디봇 편집]버튼**을 클릭하여 에디봇 편집 화면으로 이동하세요.

<div><figure><img src="/files/xU2RR9lpTf8GZGq4iK9Z" alt="" width="375"><figcaption><p>이전 작성내역이 있는경우</p></figcaption></figure> <figure><img src="/files/rxgEO282rxqXibjarAo6" alt="" width="375"><figcaption><p><strong>새로 등록</strong>하는 상품의 상세페이지를 에디봇으로 작성하는 경우</p></figcaption></figure></div>

2. 디스플레이어 '링크'를 복사하고, 에디봇 링크칸에 넣어주세요.
   1. 에디봇 편집 화면 좌측 바에 **1번 \[링크] 버튼**을 클릭
   2. 2번 동영상 링크 입력칸에 찰나 라이브러리에서 복사한 동영상 링크를 붙여넣기
   3. 3번 **\[확인]버튼**을 클릭하면 링크 입력 영역이 찰나 디스플레이어 영상으로 교체되어 에디봇에 표시되는 것을 확인할 수 있어요.

<figure><img src="/files/cwTHEz1Ji9vWmnuIZ2Vl" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/X0Z9FKgHOEMIqAureuTt" alt=""><figcaption></figcaption></figure>

3. 에디봇 화면에서 찰나 디스플레이어 크기를 조절하세요.

   1. 가로 영상 크기 조절\
      \- 아래 이미지 1번에 삽입된 찰나 동영상을 클릭하세요.\
      \- 2번 가로 길이 입력창에 숫자를 입력하여 원하는 크기로 조절하세요.

   <div data-full-width="true"><figure><img src="/files/bEkbJNJEG6M49wa1hGUt" alt=""><figcaption></figcaption></figure></div>

   2.세로 영상 크기 조절\
   \- 1번에 삽입된 찰나 동영상을 클릭하세요.\
   \- 좌측 상단에 위치한 가로/세로 크기 입력 영역에서 2번 비율 고정 기능을 해제 하세요.\
   (해제 시 아이콘 색깔이 파란색에서 회색으로 변경돼요.)\
   \- 영상의 가로:세로 비율이 9:16일 경우, 영상 위아래 여백 없이 영상을 꽉 채우려면 세로값에 1777을 입력하세요.

   <figure><img src="/files/pmRNWUoffR48tlHBQAzv" alt=""><figcaption></figcaption></figure>

   <figure><img src="/files/yMVwC71WvRvgDyoAw1os" alt=""><figcaption></figcaption></figure>

{% endtab %}
{% endtabs %}


---

# 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://support.charlla.io/userguide/player/displayer.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.