> 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/jp/users-guide/publish.md).

# サイトに表示する・動画を共有する

動画をサイトに掲載したり、SNSでシェアしたりするための「埋め込みコード」や「共有URL」の取得方法を解説します。

## 📋 取得できる2種類の形式

動画を「サイトに直接埋め込む」か「URLで送る」かによって、2つの形式を使い分けます。\
それぞれ「ディスプレイヤー（埋め込み用設定）」と「ショッププレイヤー（共有ページ用設定）」のどちらの設定を反映させるか選んで取得できます。

* **埋め込みコード**\
  自社サイトやブログのHTMLに貼り付けて、ページ内に動画を表示させる際に使用します。
* **動画URL**\
  SNS（Instagram, Xなど）やメルマガ、LINEなどで、を動画をシェアする際に使用します。

***

## 🖱️ コード・URLのコピー方法

取得方法は、操作している画面に合わせて以下の2通りから選べます。

1. [ライブラリ画面から取得する方法](#id-1-raiburarikara)
2. [動画編集画面から取得する方法](#id-2-kara)

### 1. ライブラリ（一覧）画面から取得

{% stepper %}
{% step %}

#### ライブラリ画面で動画を探します

動画が複数ある場合、検索機能を使って探すのがおすすめです。
\
詳細については[\[動画検索・管理\]](/jp/users-guide/manage/search.md)ページをご参照ください。
{% endstep %}

{% step %}

#### リンクコピーボタンをクリック

各動画の右端にある \[リンクコピー] のアイコンをクリックします。設定したいプレイヤーに合わせて、以下のどちらかを選択してください。

* **左側の**<img src="/files/DdHgF8GoMe87VNWaCEda" alt="" data-size="line">**アイコン：**\
  ディスプレイヤー（埋め込み用設定） サイト内に埋め込むための設定（サイズや自動再生など）を反映させたコード・URLを取得します。
* **右側の**<img src="/files/kIw0CF9m7CRcKldXmE4q" alt="" data-size="line">**アイコン：**\
  ショッププレイヤー（共有ページ用設定） SNS共有時などに表示される、専用ページ用の設定（ショップ情報など）を反映させたコード・URLを取得します。

<figure><img src="/files/SssyuwwQKAiyD9D00mMq" alt=""><figcaption><p> 画像クリックで拡大</p></figcaption></figure>
{% endstep %}

{% step %}

#### 形式を選んでコピー

アイコンをクリックするとポップアップが表示されます。

1. 「コード」 または 「リンク」 をクリックします。
2. ポップアップ下のコピーボタンをクリックすれば完了です。

<figure><img src="/files/YhdFJLlPUN1ndKsxNiQP" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>

{% hint style="warning" %}

#### 💡 iframeが制限されている場合（videoタグの利用）

ご利用のサイトでiframeが制限されている場合は、取得画面で \[videoタグ] にチェックを入れてコードを取得してください。

> **⚠️ videoタグご利用時の注意点**
>
> * 設定の自動更新不可: プレイヤー設定（自動再生など）を変更した場合は、必ずサイト上のコードを最新のものに差し替えてください。
> * オーディオボタンの制限: オーディオボタンの独立表示ができません。取得前に必ず \[オーディオボタンのみ表示] のチェックを外してください。
>   {% endhint %}
>   {% endstep %}
>   {% endstepper %}

### 2. 動画詳細（編集）画面から取得

{% stepper %}
{% step %}

### 動画編集画面を開きます。

サイドメニューから、コピーしたい方のプレイヤーをまず選択して切り替えます。

* ディスプレイヤー（埋め込み用設定）を選択 サイト内に動画を直接埋め込みたい場合に使用します。
* ショッププレイヤー（共有ページ用設定）を選択 SNSやメルマガで、動画専用ページのURLをシェアしたい場合に使用します。

<figure><img src="/files/HeJSnnOQiFcuHZGta1Sd" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>
{% endstep %}

{% step %}

### リンクコピーボタンをクリック

選択したプレイヤーの設定が反映された状態で、コードを取得します。

1. サイドメニュー内の \[リンクコピー] ボタンをクリックします。
2. ポップアップが表示されたら、「埋め込みタグ」 または 「動画URL」 をクリックしてコピー完了です。

<figure><img src="/files/7T9qEPhi1BOKD6RITkY9" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure>
{% endstep %}
{% endstepper %}

***

### 🚀 サイトへの表示・共有のコツ

コピーしたコードやURLは、以下の場所で活用してください。

* **サイトへの埋め込み**\
  HTML編集画面やCMS（WordPressなど）のカスタムHTMLブロックに貼り付けてください。
* **SNS・メルマガでのシェア**\
  コピーしたURLをプロフィール欄や投稿本文に貼り付けるだけで、ショッパブル動画専用ページが共有されます。

{% hint style="info" %}
各プラットフォームへの具体的な貼り付け手順については、順次公開予定です。
{% endhint %}

***

#### 💡 より高度な表示方法をお探しですか？

動画を表示させるだけでなく、サイトの端に浮かせる（フローティング）や、複数の動画をスライド表示させたい場合は、ウィジェット機能をご利用ください。

👉 [ウィジェットを表示させる（コードコピー）](https://www.google.com/search?q=../widgets/manage)


---

# 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/jp/users-guide/publish.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.