How do I add a YouTube video in Webflow?

Place a video element and paste the link

The video element embeds a video that already lives on another host. YouTube and Vimeo are the hosts most sites use. Webflow also accepts a public link from other hosts, including Wistia, TED, and Twitch. It does not play a file you upload to the Asset panel inside this element. An uploaded clip belongs in a background video, and that element is silent.

Open the Add panel and drag a video element onto the canvas. You can also press Command + E on Mac or Control + E on Windows and search for the video element. Double-click the element, or select it and open Element settings. Paste the video URL, add a title if you want one, and press Enter. The thumbnail should appear in the element.

Example: a homepage section should play your product demo. Copy the address from the YouTube watch page, the one that contains watch?v= and your video id. Paste that full address into Video settings. If the thumbnail appears, Webflow accepted the link. Publish the site and press play on the live page. The Designer thumbnail is not the same check as a visitor watching the video.

Choose the YouTube element for playback options

Use the plain video element when the video only needs to sit on the page. Use the YouTube element when you need YouTube's embed options. Add it from the Add panel or with Quick find. Paste the YouTube link and press Enter.

YouTube settings cover the choices most product pages need:

• Start at, in mm:ss or hh:mm:ss, so a demo can begin at 00:15 instead of a logo
• Mute, which is off by default
• Autoplay, which some browsers block unless the video is also muted
• Show player controls, which is on by default
• Privacy mode, which serves the video from youtube-nocookie.com so the embed avoids cookies that track viewing
• Limit related videos to the same channel after the video ends

The YouTube element keeps its aspect ratio and takes the full width of its parent. Put it inside a div block when the player should be narrower than the section. This element cannot be connected to a CMS field. When each post needs its own video, use a video element and a video field.

Pull a different video from each CMS item

A video field stores a YouTube or Vimeo link on a Collection item. In Collection settings, click New Field and choose Video. You can make the field required. On the item, paste a public URL from a supported host. The same field works on desktop and on a phone. You do not upload a separate mobile file.

On the Collection page, or inside a Collection list, add a video element. In Video settings, check Get video from and choose that video field. Uncheck Get video from if the element should go back to one pasted URL.

A rich text field can hold a video too. On a new line, open the plus menu and insert the video. That path does not include the YouTube element's mute, autoplay, privacy mode, or related-video control. You can still set a start time by adding ?t= and a number of seconds to the URL. ?t=30 starts the video at 30 seconds. ?t=300 starts it at 5 minutes.

Fix an invalid video URL

If Webflow reports an invalid video URL, the link is usually private, embedding is turned off, or the address is incomplete. Confirm the host is one the video article lists. Confirm the video is public and that embedding is allowed. Copy the URL from the host again and paste it once more.

If the thumbnail is still missing, add ?force=true at the end of the URL in Webflow. A short youtu.be link would look like the id, then ?force=true. That asks Webflow to fetch the page again. When the thumbnail appears, remove ?force=true and keep the normal link.

The video field uses the same checks. A link that blocks embedding fails there too. Fix the video's privacy on YouTube or Vimeo, then paste the URL again.

Set the width, then publish

The video element follows the box around it. A full-width section makes a full-width player. For a set frame, drag in a div block, give that div a width and a height, and place the video inside it. The player conforms to that div.

The YouTube element is slightly different. It takes the full width of its parent and keeps the video's aspect ratio. A div block with the width you want is enough. You do not have to set a matching height for that element.

Publish after the thumbnail looks right. Open the live URL in a desktop browser and on a phone. Press play. If autoplay is on and the video stays paused, turn mute on as well, publish again, and retest. If the player is wider than the column on a phone, the parent div is wider than the screen. Narrow that div on the smaller breakpoint, then publish once more.