Video Sources & URLs | Using Video in Webflow

Published

November 25, 2022

Updated

Webflow offers a nice, simple player capability which handles a good range of popular video sources.

NOTE: Webflow does not offer the ability to host your videos for you, with the exception of background videos, which are a separate component. You will need to host your video somewhere for it to be playable on your site.

According to Webflow's docs, these are the supported ones;

YouTube (if you want more control over your YouTube video, try using a YouTube video element)
Vimeo
DailyMotion
KickStarter (all you need to do is paste in the main campaign URL and Webflow will grab the main campaign video)
TED (multilingual support)
Wistia
Ustream
Livestream
Twitch
Tudou
Hulu
SproutVideo

Additional Formats Supported

In testing, and in the Webflow forums, I've found that these sources can also be used, although some require edits to the URL.

Loom - I'm primarily using loom vids in these tutorials
YouTube Shorts - Requires some URL editing, see the lesson for how to do that.
Instagram Reels - Inconclusive, as of 26-Nov-2022, seems to be having problems but is not generating errors.

Responsive Video

Surround the video iframe in a DIV;

</div>

Then add this custom CSS;

.video-responsive {

position: relative;

overflow: hidden;

padding-top: 56.25%; /* 16:9 Aspect Ratio */

}

.video-responsive iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

‍