> For the complete documentation index, see [llms.txt](https://docs.opusbooster.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.opusbooster.com/platform/widgets/video-widget.md).
# 動画ウィジェット
動画をページに追加するのはとても簡単で、追加する方法は複数あります。まず、ビデオウィジェットアイコンに移動します。
埋め込み用のURLまたはカスタムコードを入力します。（例：youtubeから→共有→埋め込みコードをコピー）
動画を配置したら、スタイリングエレメントを編集することができます。
* ファイルマネージャー領域からサムネイル画像を追加する
* 動画の周囲に影をつける
また、動画のサイズを好みのコンテナ/カラムに変更することも可能です。
### 動画を自動再生する方法
以下のコードを動画ウィジェットに埋め込むことによって、動画を自動再生させることが可能です。
#### 動画ファイルを直接指定する場合
```html
<!-- Vimeoの動画を埋め込むiframe -->
<iframe src="https://player.vimeo.com/video/VIDEO_ID?background=1&autoplay=1&muted=1" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen id="vimeoPlayer"></iframe>
<!-- 音を出すボタン -->
<button id="unmuteButton">音を出す</button>
<!-- 音をミュートにするボタン -->
<button id="muteButton">音をミュートにする</button>
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var iframe = document.querySelector('#vimeoPlayer');
var player = new Vimeo.Player(iframe);
var muteButton = document.querySelector('#muteButton');
var unmuteButton = document.querySelector('#unmuteButton');
muteButton.addEventListener('click', function() {
player.setVolume(0);
});
unmuteButton.addEventListener('click', function() {
player.setVolume(1);
});
</script>
上記のコードの、VIDEO\_IDを、埋め込みたいVimeoの動画ID（共有ボタンで「リンクをカスタマイズ」する前のURLに含まれている数字の羅列です。）に置き換えてください。
{% hint style="info" %}
ブラウザで動画を自動再生するためには、音声をミュートにしておく必要があります。そのため、上記コードでは音声がミュートの状態で再生が始まる設定にしています。また、オートウェビナーとしての利用を考慮して、再生バーを非表示にした場合のために、音声のオンオフボタンを埋め込んでいます。（Vimeoでは、再生バーを非表示にすると音声コントロールも非表示になってしまうため。）
{% endhint %}
[^1]: ご自身のVImeo動画IDに置き換え
---
# 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.opusbooster.com/platform/widgets/video-widget.md?ask=&goal=
```
`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.