# YouTube動画 ### YouTube動画要素について [YouTube動画要素](https://help.pagefly.io/manual/youtube-element/)は、ウェブページの魅力を高め、コンバージョン率の向上を目指して設計されています。YouTubeから動画を簡単にウェブサイトやブログに組み込むことができます。 動画は、テキストだけよりも動的で魅力的な方法で注意を引きつけ、情報を伝えることが知られているため、視聴者を視覚的なコンテンツで引きつけたい場合に特に役立つ要素です。 以下の動画チュートリアルで詳細を確認できます。 {% embed url="" %} ### YouTube動画要素へのアクセス方法 PageFlyページで、YouTube動画要素機能にアクセスするには、以下の手順に従います。 * ステップ1：エレメント機能をクリックします。 * ステップ2：**メディア**セクションにある**YouTube**動画要素をクリックします。 * ステップ3：目的の要素をページエディタにドラッグアンドドロップして使用を開始します。 ![](/files/0KJZKoV9Sz14WX71AInG) ### YouTube動画要素の設定方法 YouTube動画要素には、コンテンツの外観を細かく調整して最高のコンバージョン率を達成できる多くの異なるパラメーターが付属しています。 YouTube動画要素を選択し、\[全般]タブと\[スタイル]タブに移動してパラメーターを確認してください。 PageFlyでページエディタを操作する際の、YouTube動画要素の主なパラメーターは以下のとおりです。 #### 全般設定 | | | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **YouTube video URL**: あなたのYouTube動画の完全なURL |

PageFly Youtube video

Display ratio: ビデオの表示比率を4:3または16:9から選択します。

PageFly Youtube video

| | **Video Size**: 動画のサイズを2つのオプションで設定します：Full Width-100% Video SizeまたはCustom size | ![](/files/MLo0WO8HxypeB3yDpovv) | | **Video Width**: 動画の幅を変更します（このセクションを編集する際にCustom sizeモジュールを適用していることになります）。 | ![](/files/PeBdjSI8osvKBJTv03GQ) | | **Show Controls**: 動画プレーヤーのコントロールを表示/非表示にします。 | ![](/files/lZf0peAC8Bf5azck91FJ) | | **Enable Loop**: 動画がループで途切れることなく再生されます。 | ![](/files/E4M43gnOMLgiysEnj1Ll) | |

Enable Autoplay: 自動再生機能をオン/オフにします。以下の場合は自動再生機能が動作しない可能性があることに注意してください。
- ユーザーがブラウザでその操作を防止するように設定している場合、またはパラメーター「Mute Video」がオフになっている場合。
- ユーザーが低電力モードのiPhoneを使用し、Safariブラウザでウェブサイトにアクセスする場合、自動再生機能は有効になりません。

| ![](/files/vrTfo6Xv7DBb7ZFC4AMV) | | **Mute Video**: 動画の音をオン/オフにします。 | ![](/files/yLbHT9B2ZKS8pROxCg8w) | |

Content loading: ライブプレビューでの動画の読み込みタイプを選択します。2つのオプションがあります。
- Lazy loading: 動画はユーザーのビューポートに入ったときのみ読み込まれ、初期ページの読み込み時間を短縮し、帯域幅を節約します。
- Standard: 動画はすぐに読み込まれ、高速なインターネット接続を持つユーザーによりスムーズな体験を提供できます。

| ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfHrZiHOqQQwGN7U4expyFgI8o3JZJ_oGDtEeJvPGFbhd5jjJijg4LZo6hDdmPqpV0DcA8AEm9b6Kd6qbCIyBCJRGMyaVKfAHblWwh8uUDf1utu1hkxEZ0WcKV6R4mrJcmzRGRzB3px6elE6rcNfgkey09zZH1lsuyhAVQu3MYTFJQ.png) | |

Custom Start And End Time
- Start at: YouTube動画の開始時間をカスタマイズします。
- End at: YouTube動画の終了時間をカスタマイズします。

| ![](/files/yiYC3h6qXJT0pUujgZQl) | 属性、表示、アニメーションのパラメーターに関する詳細情報は[こちら](https://help.pagefly.io/manual/elements-general-settings/)で確認できます。 #### スタイル設定 \[スタイル]タブでは、コンテンツの色、間隔、背景、タイポグラフィなどのパラメーターを使用して、YouTube動画要素の外観をカスタマイズできます。\[スタイル]タブに関する詳細については、この[リンク](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 ### よくあるケース * HTML動画要素を利用したり、YouTubeコードを直接埋め込んだりすることは避けてください。これは、モバイルやタブレットデバイスでのレスポンシブ対応を損なう可能性があります。埋め込みコードは固定幅の寸法を課すことが多く、様々な画面サイズでレイアウトの歪みが生じる原因となります。 * さらに、YouTubeの更新されたAPIに従い、自動再生機能はミュート機能が有効になっている場合に依存することに注意してください。ただし、モバイルオペレーティングシステムによって課されるデフォルトの制限により、タブレットまたはモバイルデバイスでは自動再生は機能しません。 ### よくある質問 **1. YouTube要素とは何ですか？** YouTube動画要素は、YouTube動画をShopifyストアに統合するためのシンプルなソリューションです。動画のURLを使用するだけで、そこからYouTube動画セクションを好みに合わせてカスタマイズおよびスタイル設定できます。 **2. HTML動画とYouTube要素の違いは何ですか？** HTML動画要素を使用すると、動画をShopifyストアに直接アップロードし、PageFlyページで使用できます。YouTube動画要素を使用すると、YouTubeで公開されている動画をPageFlyページに埋め込むことができます。 ### 追加リソース * [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/youtube-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.