> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 動画の使用

> 外部リンクや GitHub へのアップロードを使って、プロジェクトに動画を埋め込む方法を学びます

Lovable では、プロジェクトに動画を埋め込む方法が 2 つあります。以下で、それぞれの方法をステップごとに説明します。

<AccordionGroup>
  <Accordion title="外部動画へのリンクを利用する">
    <Tip>
      最も簡単で推奨される方法は、YouTube のような外部でホスティングされている動画へのリンクを使うことです。
    </Tip>

    <CodeGroup>
      ```txt Example prompt theme={null}
      Embed this video
      https://www.youtube.com/watch?v=dQw4w9WgXcQ 
      in the hero content section.
      ```
    </CodeGroup>
  </Accordion>

  <Accordion title="GitHub の public フォルダー内の動画を利用する">
    <Warning>
      大きな動画ファイルを GitHub リポジトリにアップロードすると、リポジトリのサイズが増え、Lovable のパフォーマンスに影響する可能性があります（リポジトリのクローン時間が長くなる、プレビュー/サンドボックスの起動が遅くなるなど）。

      その代わりに、YouTube のようなホスティングサービスや S3 のようなファイルストレージオプションを使うのがおすすめです。前のステップで説明したように、参照用の URL を取得してそれを使う方法です。
    </Warning>

    プロジェクトの GitHub リポジトリに動画をアップロードし、そこから直接参照することもできます。手順は次のとおりです。

    <Steps>
      <Step title="GitHub リポジトリを接続する">
        まず、プロジェクトが GitHub リポジトリとリンクされていることを確認してください。[リポジトリを設定する方法はこちら](https://docs.lovable.dev/integrations/git-integration) を参照してください。
      </Step>

      <Step title="public フォルダーにアクセスする">
        接続済みリポジトリ内で、`public` ディレクトリに移動します。このフォルダーは画像、動画、そのほかのメディアなど、プロジェクトのアセットをホスティングするための場所です。
      </Step>

      <Step title="動画をアップロードする">
        public フォルダーに、動画ファイルをドラッグ＆ドロップするか、**"choose your files"** をクリックしてローカル環境からファイルを選択・アップロードします。
      </Step>

      <Step title="ファイルをコミットする">
        動画ファイルを選択したら、簡単なコミットメッセージ（例: "Adds a Mars video to be used in the app"）を入力し、**"Commit changes"** をクリックします。

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/assets/using-videos-github-commiting.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=af4f750c176f85a65aeee1b1234b9107" alt="Committing video file" width="1297" height="797" data-path="assets/using-videos-github-commiting.png" />
      </Step>

      <Step title="動画のパスを取得する">
        アップロードが完了したら、動画ファイルをクリックし、コピーアイコン :octicons-copy-16: を使ってそのパスをコピーします。次のステップでこのパスが必要になります。

        <img src="https://mintcdn.com/generaltranslation-d8a08cd1/At48MABj-G93zw7Y/assets/using-videos-github-selecting.png?fit=max&auto=format&n=At48MABj-G93zw7Y&q=85&s=f5135eb6a7341e74614b3e5aef0a7020" alt="Copy video file path" width="1293" height="378" data-path="assets/using-videos-github-selecting.png" />
      </Step>

      <Step title="Lovable 内で動画を参照する">
        これで、プロンプト内でファイルパスを指定して動画を埋め込めます。たとえば、次のようなプロンプトを使えます。

        <CodeGroup>
          ```bash Example prompt theme={null}
          Insert an additional video into the introduction section using this file: 
          public/mars-video-nasa.mp4
          ```
        </CodeGroup>

        先ほどコピーしたファイルパスを、正確にそのまま使用してください。
      </Step>
    </Steps>

    これらの方法を実際に確認するには、次のサンプルプロジェクトを見てみてください: [Lovable using videos example project](https://lovable.dev/projects/380835ab-c8d7-4f45-9b0d-51ec04294457)。両方の方法で動画を統合する実際のプロンプト例が含まれています。

    また、動画追加のプロセスをより技術的な観点から確認したい場合は、この public リポジトリも参照してください: [GitHub: Video Upload Example](https://github.com/viborc/adding-videos-example)。動画のアップロードと、そのプロジェクトで使用されている実装の詳細が含まれています。
  </Accordion>
</AccordionGroup>