# HTML動画
### HTMLビデオ要素について
概要： [HTMLビデオ要素](https://help.pagefly.io/manual/html-video-element/) は、コンバージョン率を高めるためにページをより魅力的にすることを目的としています。この要素を使用して、Webサイトやブログでビデオを共有できます。
詳細な手順に進む前に、以下のビデオをご覧ください。
{% embed url="" %}
### HTMLビデオ要素へのアクセス方法
HTMLビデオ要素は、左側ツールバーの要素アイコンをクリックすることで見つけられます。
* **ステップ1**: 要素リストを開くために**要素**アイコンをクリックします
* **ステップ2**: PageFlyの要素タブで、「**HTMLビデオ**」をクリックします
* **ステップ3**: 要素をページエディターにドラッグアンドドロップします
### HTMLビデオ要素の設定方法
この要素には、コンテンツの外観を細かく調整して可能な限り最高のコンバージョン率を達成するためのさまざまなパラメータが豊富に備わっています。
ページに追加したHTMLビデオ要素を選択し、「General」タブと「Styling」タブに移動して設定にアクセスします。
{% hint style="warning" %}
**重要な注意**：
* ファイルサイズは10MB未満である必要があります。
* サポートされているビデオ形式には、MP4、WebM、Oggが含まれます。
{% endhint %}
#### 一般設定
全体設定については、「General」タブに移動します。HTMLビデオ要素の主な設定を以下に示します。表示、属性、およびアニメーション設定の詳細については、[こちらのガイド](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。
**HTMLビデオソース**
ビデオをアップロードしたり、再選択ボタンをクリックしてURLを埋め込んだりできます。
* コンピューターからビデオを追加
「**ビデオを選択**」ボタンをクリックし、次に「**ビデオを追加**」ボタンをクリックするか、点線領域にビデオをドラッグアンドドロップできます。
* URLからビデオを追加
URLからビデオを追加するには、Shopifyの左ナビゲーションで**コンテンツ > ファイル**に進み、リンクボタンをクリックしてリンクをコピーします。
次に、PageFlyエディターで**ビデオを選択 > URLから追加**をクリックし、「Video URL」にURLを貼り付けてビデオを追加します。
* メディアファイルからビデオを追加
URLアイコンの横にある「**メディアファイル**」オプションをクリックすると、利用可能なビデオのリストが表示されます。
要素からビデオファイルまたはURLを削除したい場合は、ここにある「**クリア**」ボタンをクリックするだけで、この要素に対して別のビデオを選択できます。
**コントロールを表示**
このオプションを選択または選択解除することで、ビデオプレイヤーコントロールを表示または非表示にすることができます。
**ループを有効にする**
このパラメータをオンにすると、ビデオはループで常にノンストップで再生されます。この機能はライブビューで確認できます。
**オートプレイを有効にする**
このパラメータを選択または選択解除することで、オートプレイ機能をオン/オフできます。
オートプレイ機能は、以下の場合には動作しない可能性があることに注意してください。
* ユーザーがブラウザを構成してその動作を防いでいるか、「**ビデオをミュート**」パラメータがオフになっている場合。
* ユーザーが低電力モードのiPhoneを使用し、SafariブラウザでWebサイトにアクセスする場合、オートプレイ機能はアクティブになりません。
**ビデオをミュート**
「はい」または「いいえ」を切り替えて、ビデオの音をオフにします。
**コンテンツの読み込み**
以下の2つのオプションで、ビデオの読み込み方法をカスタマイズできます。
* 遅延読み込み：ビデオはユーザーの画面に表示されたときにのみ読み込まれ、帯域幅を節約し、初期ページ読み込みを高速化します。
* 標準：ページが開いたときにすべてのビデオがすぐに読み込まれ、すべてがすぐに準備されます。この設定はユーザーエクスペリエンスを向上させます。
**カバー画像ソース**
「**画像を選択**」をクリックして、ビデオのサムネイルカバーとして画像を設定し、目的の画像を選択して「**完了**」をクリックします。
**画像品質**
これにより、さまざまなデバイスで画像品質をカスタマイズし、パフォーマンスを最適化するのに役立つさまざまな値が得られます。各値は、事前に定義されたmin-widthおよびmax-width値に基づいて画像寸法を調整します。
* 自動 (375px - 2048px)
* オリジナル (original size): 元の品質を維持します
* サムネイル: 375px
* 低 (375px - 550px)
* 中 (375px-1280px)
* 高 (375px-1920px)
* 非常に高 (375px-2560px)
* 超 (375px-3840px)
**カバー画像の読み込み**
ストアの読み込み速度を向上させるには、以下の「カバー画像の読み込み」オプションのいずれかを選択します。
* 遅延読み込み：表示されたときにのみ画像を読み込み、初期読み込み時間を改善します。
* 事前読み込み：画像を早期に読み込み、より速く利用できるようにします。
* 標準：他のコンテンツと一緒に画像を通常通り読み込みます。
#### スタイル設定
「Styling」タブに移動して、HTMLビデオ要素の外観をカスタマイズします。このタブの設定に関する詳細については、[要素スタイル設定ガイド](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。
### 使用例
#### コンテナの中央にHTMLビデオを配置する
HTMLをコンテナの中央に配置したい場合は、「**スタイリング > 間隔 > パディング**」に移動し、中央マージンに数値を入力します。数値が大きいほど、ビデオの周囲のスペースは大きくなります。
#### HTMLビデオに枠線を追加する
HTMLを他の要素から目立たせるには、枠線を追加してより目立つ端を与えます。3つのデフォルトの枠線スタイルがあります。
\| 実線 |
|  |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 点線 |
|  |
| 破線 |
|  |
### よくある質問
**1. HTMLビデオの最大ファイルサイズはいくつですか？**
HTMLビデオの最大ファイルサイズは10MBです。
**2. HTMLビデオでサポートされている形式は何ですか？**
サポートされているビデオ形式には、MP4、WebM、Oggが含まれます。
**3. HTMLビデオとは何ですか？**
HTMLビデオ要素は、コンバージョン率を高めるためにページをより魅力的にすることを目的としています。この要素を使用して、Webサイトやブログでビデオを共有できます。
**4. HTMLビデオ要素とYouTube要素の違いは何ですか？**
このビデオ要素を使用すると、YouTubeアカウントなしでWebサイトにビデオをアップロードして使用できます。ただし、ビデオがスムーズに再生され、Webサイトが迅速に読み込まれるように、ファイルサイズの制限があります。
**5. HTMLビデオを使用するためのベストプラクティスは何ですか？**
* 製品やブランドに関連する高品質のビデオを使用します。
* より広いブラウザ互換性と再生の成功を確保するために、ビデオを複数の形式（例：MP4、WebM）で提供することを検討します。
* 読み込み時間を高速化するために、ビデオファイルを最適化します。大きなビデオファイルはWebサイトの速度を低下させ、ユーザーエクスペリエンスとSEOに影響を与える可能性があります。
### その他のリソース
* [YouTubeとHTMLビデオがオートプレイしない](https://help.pagefly.io/manual/youtube-html-videos-do-not-autoplay-issue/)
* [VideoWise – ショッピング可能なビデオ要素をPageFlyで使用する方法](https://help.pagefly.io/manual/videowise-shoppable-videos-element/)
---
# Agent Instructions: 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:
```
GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/pagefly-elements/media/html-video-element.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.