Clip

The clip element enables you to integrate a video, hosted on a third-party platform like YouTube or Vimeo, anywhere on your website.

During this session, you’ll be educated on:

1. The procedure for adding a video
2. How to adjust video configurations
3. Establishing video proportions
4. Alternative methods to include clips on your website
5. Incorporating videos using personalized code

Integrating a Clip

There are two methods to insert a clip element into your website:

• Unveil the Insert panel and drag a video element onto your Webflow canvas
• Key in Command + E (on Mac) or Control + E (on Windows) to open the Quick find and seek the video component

Adapting Clip Configurations

After locating a clip element on your canvas, you can modify the Clip configurations to input a URL and heading. To swiftly access the Clip settings:

• Double-tap on the clip element
• Pick the clip element and navigate to the Element settings panel (D)

Paste the video’s URL, include a title if desired, and press Enter/Return. The preview image for your clip will exhibit within the clip element.

Supported Clip Origins

• YouTube (consider utilizing a YouTube video element for enhanced YouTube video control)
• Vimeo
• DailyMotion
• KickStarter (merely paste the main campaign URL and Webflow will fetch the primary campaign clip)
• TED (supports multiple languages)
• Wistia
• Ustream
• Livestream
• Twitch
• Tudou
• Hulu
• SproutVideo

Notify us via our Wishlist if your clip origin is unconventional, and we will strive to incorporate it!

‍Crucial: Currently, submitting video files to the Asset panel for use in the clip element is unsupported. Nevertheless, you can upload videos as muted background clips.

Configuring Clip Dimensions

The clip element conformably mirrors the dimensions of its encompassing container (e.g., when placed within a div block, it inherits the entire width of that div block). If you desire to specify a distinct width and height for your clip, generate a unique div block. Drag a div block from the Insert panel and set the div block’s width and height parameters. Upon associating your clip with this personalized div block, it will adhere to that size.

Additional Approaches for Integrating Clips on your Website

You can also insert clips on your website using other components like:

• YouTube clip
• Background clip
• Lightbox
• Rich text
• Personalized code embed

YouTube Clip Element

The YouTube clip element enables you to nest a clip from a YouTube URL. This element provides all the presentation choices available in YouTube’s embed feature, such as displaying related videos from a channel, specifying a certain start time, revealing or concealing video controls, and more. Find out more about the YouTube clip element.

Motion video section

The motion video section allows you to incorporate moving visuals without sound. Unlike the video component that only accommodates YouTube and Vimeo URLs, the motion video section can handle any video file you upload. Additionally, the motion video section includes a built-in toggle for play/pause functionality, enabling site visitors to control the video background. Gain more insights about the motion video feature.

Popup modal video element

The popup modal video element allows site visitors to launch a video clip in a popup model. Similar to the video segment, the popup modal supports YouTube and Vimeo URLs. Dive deeper into the popup modal video element.

Text styling element and text field with rich content

The text styling section enables you to insert video content as well. This becomes more potent when utilized to fetch data from a rich text field within a CMS Collection.

Alternatively, a video section could be employed to dynamically fetch data from a Collection’s video component. Discover more about Collection video components.

Adding videos through custom code embedding

You can also integrate HTML videos using the embed feature:

1. Access the Add section
2. Place an embedfeature on the workspace
3. Insert your video code (Find out more about video elements in HTML)
4. Select Save & close