How to add a video background

TeleportHQ has no video option in the Background section. To put a video behind your content, add a Video element inside the section, make sure it plays automatically, muted and on repeat, stretch it to fill the section, and raise the section's other content above it. The result works like a background video on your published site.

Before you start#

• You need a video: upload your own file or use a free stock video from Pexels. See How to upload images, videos and files or How to use free stock photos and videos.
• Uploading video files needs a trial or paid plan. Pexels stock videos work on every plan. See Which files can I upload, and how big can they be?.
• Keep the video short and small, for example a 10–20 second clip. Visitors download the whole file before it plays: TeleportHQ doesn't compress videos when you publish.

Steps#

1. Add the video to the section#

1. In the left sidebar, open the Assets Manager and find your video.
2. Drag the video onto the canvas, into the section you want, for example your hero section. Drop it as the first element inside the section.

A Video element is added and selected.

2. Make it play like a background#

1. With the video selected, find the Video section in the right panel. If it shows only its title, click the + next to the title.
2. Check that autoPlay, muted, loop and playsInline are set to True. A new Video element starts like this. To change one, click True or False in its switch.
3. Check that controls is set to False, so no play buttons show over your content.

Browsers only play videos automatically when they're muted. playsInline stops phones from opening the video full screen.

3. Stretch the video to fill the section#

1. With the video selected, open Position and choose Freestyle.
2. In the offset boxes, set Top to 0 and Left to 0.
3. Open Size. Set Width to 100% and Height to 100%.
4. In Object Fit, choose cover. The video fills the section without stretching.

4. Keep the content on top#

1. Select the section's content, for example the container with your heading and button.
2. In Position, choose Relative.
3. In Z-index, type 1.

5. Keep the video inside the section#

1. Select the section itself.
2. In Size, set Overflow to hidden.

Check that it worked#

On the canvas, the video fills the section behind your heading and button. To see it play, click Preview in the bottom toolbar. The video starts on its own, without sound, and repeats.

Troubleshooting#

"Cannot upload video files" Your workspace isn't on a trial or paid plan. Upgrade the workspace, or use a Pexels stock video instead. For plans, see https://teleporthq.io/pricing.

"Upload failed. The maximum file size is 10MB" The video is bigger than your plan allows. Compress it or shorten it, then upload it again. The message always says 10MB, but some plans allow bigger files. See Which files can I upload, and how big can they be?.

"Videos are not compressed when published: visitors download the whole file." The video is 5 MB or more, for example "hero.mp4" is 12 MB. The upload still works, but a big background video slows your page. Shorten it or export it at a smaller size, then upload it again.

The video covers my text The content isn't raised above the video. Give the content container Relative position and a Z-index of 1 or higher.

The video spills into other sections Set Overflow to hidden on the section that holds the video. Also check that the section's Position is Relative. Choosing Freestyle for the video sets this automatically ("Position Relative was set to the parent container."), but only when the section had no position before.

The video doesn't play on the canvas or on a phone Check in Preview or on the published site. Make sure autoPlay, muted and playsInline are all set to True.

Good to know#

• A still image, called a poster, can show while the video loads. With the video selected, right-click an image in the Assets Manager and choose Replace Video Poster.
• Stock videos from Pexels stay linked to Pexels on your published site.
• To show a different height on mobile, switch to the mobile screen size and change the section's height there. See How to change styles for mobile only.
• For a video that plays frame by frame as visitors scroll, instead of on a loop, use Scroll Video. See How to add a video that plays as visitors scroll (Scroll Video).