Introduction
Prompt Engineering
Integrations
Tips and Tricks
Using Videos
Learn how to embed videos in your projects using external links or GitHub uploads
Lovable offers two methods for embedding videos into your projects. Below, we’ll cover both options step by step:
The simplest and recommended way to incorporate a video is by linking to one hosted externally, like on YouTube.
Embed this video
https://www.youtube.com/watch?v=dQw4w9WgXcQ
in the hero content section.
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:
Connect your GitHub repository
First, make sure your project is linked to a GitHub repo. Here’s how to set up your repo.
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.
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.
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”.
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.
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:
Insert an additional video into the introduction section using this file:
public/mars-video-nasa.mp4
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.
Was this page helpful?