How to add a video from your computer

In TeleportHQ, you add your own video by uploading the file to the Assets Manager and dragging it onto your page, where it becomes a Video element. Select the video to set its poster image, controls, autoplay, loop and sound in the Video section of the right panel. For YouTube or Vimeo videos, use an iframe instead.

Before you start#

• Uploading video files needs a trial or a paid plan.
• Your video must be an MP4, M4V or MOV file, and within your plan's file size limit. See Which files can I upload, and how big can they be?
• For a YouTube or Vimeo video, see How to add a YouTube or Vimeo video.

1. Upload the video#

1. In the left sidebar, click Assets Manager.
2. Open the Uploads tab.
3. Drag the video file from your computer into the panel. Or click the + next to a folder and choose Upload Assets.
4. Wait until "Uploading..." disappears. The video shows in the folder.

A video of 5 MB or more shows a warning, for example: "cake.mp4" is 12 MB. Videos are not compressed when published: visitors download the whole file. The upload still works, but a smaller file makes your page faster.

See How to upload images, videos and files.

2. Put the video on your page#

1. In the Assets Manager, drag the video onto the canvas, into the container where it should play.
2. Release the mouse. A Video element is added and selected.

You can also add an empty player first: select a container, then in Elements → Primitives → Media, click Video (V) (or drag it onto the page). Then, with the player selected, open the Assets Manager, point at your video and click the replace asset button.

3. Set how the video plays#

1. Select the video on the canvas.
2. In the right panel, find the Video section. If it's collapsed, click the + next to its title.
3. Set the options you need:
   • src: the video file itself. Click the small preview to pick or replace the video in the Assets Manager.
   • poster: the picture shown before the video plays. Click the small preview to pick an image in the Assets Manager.
   • controls: shows play, pause and volume buttons.
   • autoPlay: starts the video when the page loads.
   • muted: plays without sound.
   • loop: starts the video again when it ends.
   • playsInline: plays inside the page on phones instead of full screen.
   • preload: how much of the video the browser loads early (auto, metadata or none).

A new Video element starts with autoPlay, muted, loop and playsInline turned on. For a background-style hero video, keep those on and controls off.

Replace the video or its poster#

1. Select the video on the canvas.
2. In the Assets Manager, right-click another video and choose Replace Video.
3. To change the poster, right-click an image and choose Replace Video Poster.

Check that it worked#

The video shows on the canvas with its poster or first frame. To watch it play with your settings, preview your site.

Troubleshooting#

"Cannot upload video files" Your workspace isn't on a trial or paid plan. Click Upgrade now, or use a free stock video from Assets Manager → Stock → Pexels. See How to use free stock photos and videos.

"Upload failed. The maximum file size is 10MB" The file is larger than your plan allows. Compress the video or shorten it, then upload it again.

"The format of the upload is not supported" Convert the video to MP4 and upload it again.

"Videos are not compressed when published: visitors download the whole file." The video is 5 MB or more. It's uploaded, but every visitor downloads the whole file, which slows your page. Shorten it or export it at a smaller size, then upload it again and replace the old one.

The video doesn't start by itself on the live site Browsers only autoplay videos without sound. Turn on muted as well as autoPlay.

Good to know#

• A video behind text: to place a video behind a section's content, see How to add a video background.
• A video that plays as visitors scroll: use Scroll Video in the Motion group of the Elements panel instead of the Video element.
• Stock videos: Assets Manager → Stock → Pexels has free videos you can click to insert. They play from Pexels, not from your storage.
• AI videos: select an image or video and click Generate with AI to create a short video with AI (uses AI tokens). See How to generate videos and 3D models with AI.
• Size the player like any element, with Size in the right panel. See How to set an element's width and height.
• Double-clicking a video on the canvas opens the Assets Manager.