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

# Using videos

> Embed YouTube videos or upload video files to your GitHub repository and reference them in your Lovable projects.

<head>
  <script type="application/ld+json">
    {`{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Linking to an external video", "acceptedAnswer": {"@type": "Answer", "text": "The simplest and recommended way to incorporate a video is by linking to one hosted externally, like on YouTube."}}, {"@type": "Question", "name": "Using a video from your GitHub public folder", "acceptedAnswer": {"@type": "Answer", "text": "Uploading large videos to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox). A better option is to use hosted services (like YouTube) or file storage options like S3, essentially giving you a URL that you can reference, as described in the previous steps. You can upload videos to your project’s GitHub repository and reference them directly. Here’s how: First, make sure your project is linked to a GitHub repo. Here’s how to set up your repo. Inside your connected repository, navigate to the public directory. This folder is specifically used for hosting project assets like images, videos, and other media. You can now add your video to the public folder by either dragging and dropping it or clicking \\"choose your files\\" to browse and upload the file from your local machine. After selecting your video file, enter a brief commit message (e.g., \\"Adds a Mars video to be used in the app\\") and click \\"Commit changes\\". Once the upload is complete, click on the video file and use the copy icon :octicons-copy-16: to copy its path. You’ll need this path in the next step. Now, you can embed the video by specifying the file path in your prompt. For example, you can use a prompt like this one: Ensure you use the exact file path you copied earlier. To see these methods in action, explore one of the example projects: Lovable using videos example project. You’ll find real prompts demonstrating how videos are integrated using both methods. Additionally, for a more technical look at the video adding process, check out this public repository: GitHub: Video Upload Example. It includes the video upload and the implementation details used in the project."}}]}`}
  </script>
</head>

Lovable offers two methods for embedding videos into your projects. Below, we’ll cover both options step by step:

<AccordionGroup>
  <Accordion title="Linking to an external video">
    <Tip>
      The simplest and recommended way to incorporate a video is by linking to one hosted externally, like on 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="Using a video from your GitHub public folder">
    <Warning>
      Uploading large videos to your GitHub repo can cause it to grow in size, which can affect Lovable performance (longer repo cloning times, slower startup of previews/sandbox).

      A better option is to use hosted services (like YouTube) or file storage options like S3, essentially giving you a URL that you can reference, as described in the previous steps.
    </Warning>

    You can upload videos to your project’s GitHub repository and reference them directly. Here’s how:

    <Steps>
      <Step title="Connect your GitHub repository ">
        First, make sure your project is linked to a GitHub repo. [Here’s how to set up your repo](https://docs.lovable.dev/integrations/git-integration).
      </Step>

      <Step title="Access the public folder">
        Inside your connected repository, navigate to the `public` directory. This folder is specifically used for hosting project assets like images, videos, and other media.
      </Step>

      <Step title="Upload a video">
        You can now add your video to the public folder by either dragging and dropping it or clicking **"choose your files"** to browse and upload the file from your local machine.
      </Step>

      <Step title="Commit the file">
        After selecting your video file, enter a brief commit message (e.g., "Adds a Mars video to be used in the app") and click **"Commit changes"**. <img src="https://mintcdn.com/lovable-f9060f1e/5WiQj0NImuyTcvae/assets/using-videos-github-commiting.png?fit=max&auto=format&n=5WiQj0NImuyTcvae&q=85&s=dd6b332dcdbd6451b5057f9c0dab1c1f" alt="Committing video file" width="1297" height="797" data-path="assets/using-videos-github-commiting.png" />
      </Step>

      <Step title="Get the video path">
        Once the upload is complete, click on the video file and use the copy icon  :octicons-copy-16:  to copy its path. You’ll need this path in the next step. <img src="https://mintcdn.com/lovable-f9060f1e/5WiQj0NImuyTcvae/assets/using-videos-github-selecting.png?fit=max&auto=format&n=5WiQj0NImuyTcvae&q=85&s=68b6af9d2409c7779b02048527e7a192" alt="Copy video file path" width="1293" height="378" data-path="assets/using-videos-github-selecting.png" />
      </Step>

      <Step title="Reference the video in Lovable">
        Now, you can embed the video by specifying the file path in your prompt. For example, you can use a prompt like this one:

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

        Ensure you use the exact file path you copied earlier.
      </Step>
    </Steps>

    To see these methods in action, explore one of the example projects: [Lovable using videos example project](https://lovable.dev/projects/380835ab-c8d7-4f45-9b0d-51ec04294457). You’ll find real prompts demonstrating how videos are integrated using both methods.

    Additionally, for a more technical look at the video adding process, check out this public repository: [GitHub: Video Upload Example](https://github.com/viborc/adding-videos-example). It includes the video upload and the implementation details used in the project.
  </Accordion>
</AccordionGroup>
