Skip to content
Integrations · 6 min read

Add a video

Show one YouTube or Vimeo video, or several side by side, on any page of your site.

There are two video sections:

  • Video shows one video, large, with a heading, a short intro and a caption.
  • Videos shows several videos side by side, each with its own title and description. Use it for a set of talks, interviews or how-to clips.

Visitors see a cover photo with a play button. The video player only loads when someone presses play, so your page stays fast for everyone else.

Want a short, silent video playing behind the headline at the top of your home page instead? That's a layout of the Hero section, and the video doesn't need YouTube or Vimeo. See Play a video behind your headline.

What you need first

  • The video uploaded to YouTube or Vimeo. Free accounts on either service work.
  • The video's link. You don't need any code, password or API key.

YouTube

  1. Open your video on YouTube.
  2. Click Share under the video, then Copy.

The short link (https://youtu.be/…) works, and so does the address from your browser's address bar (https://www.youtube.com/watch?v=…). Links to YouTube Shorts and live streams work too.

Embedding is on by default. If you turned it off, open the video in YouTube Studio, click Show more in the details, and turn Allow embedding back on.

Vimeo

  1. Open your video on Vimeo.
  2. Copy the address from your browser's address bar. It looks like https://vimeo.com/123456789.

In the video's privacy settings, make sure it can be embedded on other sites. Set it to Public so it plays for everyone.

Add the section

You can add it from either place:

  • From Integrations: click Integrations in the sidebar. On the Video or Videos card, click Add to a page. Choose the page under Which page? and click Add and edit. The section goes near the bottom of the page, and you can move it afterward.
  • From a page: open Pages and choose a page. On the Content tab, click Add a section at the bottom (or Add section below inside another section), then pick Video or Videos.

To move it, use the up and down arrows on the section.

Fill in the fields

  1. Heading: a few words, like "See our work."
  2. Intro: optional. One or two sentences about the video.
  3. Video link: paste the link you copied.
  4. Cover photo: optional for YouTube, since we use the video's own thumbnail. For Vimeo, we recommend adding one. Without it, visitors see a plain box with a play button.
  5. Caption: optional. A short line shown under the video.

If you add a cover photo, fill in Describe this photo too. Learn more in Edit text and photos.

Several videos

In the Videos section, fill in the Heading and Intro, and choose a Layout: Cards puts the videos in a grid, Rows puts each video beside its description, and Carousel lets visitors swipe through them. Then, for each video:

  1. Click the video in the Videos list to open it (a new one is called "New video").
  2. Video link: paste the link you copied.
  3. Title and Description: optional, shown under the video.
  4. Cover photo: optional for YouTube, recommended for Vimeo.

Click Add video for another one, up to 12. To take one out, click the trash icon on it.

Check it in the preview

The preview on the right updates as you type. When the link is right, the message "Paste a YouTube or Vimeo link to show your video here" goes away and a play button appears. For YouTube, the thumbnail appears too.

Videos don't play inside the preview. Clicking the section there just opens it for editing. You can test playback on your live site after you publish.

Publish

Your edits are saved as a draft. Click Publish at the top right, and your changes go live in about a minute. Then click View live site, find the video and press play.

Troubleshooting

A video is missing on the live site. In the Videos section, a video without a working link is left out of your live site, and the publish checks tell you which section it's in. Paste its link, or remove it.

The message "Paste a YouTube or Vimeo link" is still showing. The link isn't one we recognize. Copy it again using the steps above. Links to a channel, playlist or Vimeo showcase won't work. Use the link to the single video.

The play button shows, but the video says it's unavailable. On YouTube, check that Allow embedding is on and the video isn't private. On Vimeo, check that the video is public and allowed to be embedded on other sites. Unlisted Vimeo videos may not play.

The cover is blank. This is normal for Vimeo. Add a Cover photo.

The wrong video plays. Check that the Video link goes to the video you want. A link copied while a playlist was playing still works, but make sure it's the right video.

"This browser can't prepare videos." Making your video small happens in your web browser, and older browsers can't do it. Use a recent version of Chrome, Edge or Safari, or choose one of the free videos.

"We couldn't make this video small enough." Try a shorter clip, or one with less movement. A camera that moves a lot, or leaves blowing in the wind up close, makes a bigger file.

The video doesn't move on my phone. Some phones don't play videos by themselves in power-saving mode (Low Power Mode on an iPhone). Visitors see the photo and can tap the play button.

Play a video behind your headline

The opening banner (the Hero section) can play a short video behind your words, like a moving photo. It plays without sound, loops, and starts by itself.

  1. Open the Hero section and pick the Text over video layout.
  2. Under Video, click Choose video.
  3. Pick one of these:
    • Your video: click Choose file and pick a video from your computer or phone (MP4 or MOV). We keep the first 20 seconds, take out the sound, and make it small enough to load quickly. This happens on your own device and takes a minute or less. Keep the window open until it's done.
    • Free videos: search for a word like "garden" or "coffee" and click a video. These come from Pexels and are free to use on your site.
  4. Pick the Text position and Height, as for a photo.

For the best result:

  • Use a wide (sideways) video. It fills the banner. A tall phone video works, but on a computer only its middle shows.
  • Choose slow, steady movement so your headline stays easy to read. Your words sit on a dark shade over the video.
  • Trim it first if the part you want isn't at the start. Your phone's Photos app can trim a video.

While the video loads, visitors see its first frame as a photo. Visitors who turned off motion on their device, or who are saving data on a slow connection, see only that photo. Everyone gets a pause button in the corner.

The video plays in the preview too. To go back to a still photo, pick the Text over photo layout again. Your photo is still there.

What it costs

Adding a video is included in your plan, and so are videos behind your headline, free ones included. YouTube and Vimeo charge whatever their own plans cost, and many people use their free plans. We add nothing on top.

Related: Add a podcast or audio, Add a page, Edit text and photos.

Still stuck?

Try it on the live demo first; nothing you do there is saved. If you’d rather have a person do it, ask for a work request from your dashboard. You’ll get a quote before any work starts.