Video Sources & URLs

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 class="video-responsive">

   <iframe width="853" height="480" src="https://www.youtube.com/embed/YOUR_VIDEO_ID" frameborder="0" allowfullscreen></iframe>

</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%;

}

‍

‍

‍