Discover the best vimeo websites created by professional designers. Get inspired and start planning your perfect vimeo web design today!

I finally figured out how to get CMS video backgrounds that fill an entire container. 

Works with Webflow's own compressions as well (mp4 and webm).

I added Lazyload as well, so it only loads the video backgrounds on scroll.

Feel free to clone and ask questions in the comments.

CMS object fit video background

cms-object-fit-video-background

From my Webflow online course community came the wish to build this video player, which basically runs in a loop without sound as a background video. 
If you click on on the unmute button, the video plays from the beginning and the sound is activated.  

We need a bit of custom jQuery code for this. In addition, the Vimeo API must be included if you want to address Vimeo iFrames.

Watch the tutorial here: https://youtu.be/mKFZxHpYGng

Vimeo Background Video with Play Sound Toggle

This project is built using Vimeo's API so we can create a nice video playlist that allows you to set a custom start point in the video when a user clicks on the play button. Even better, the videos are being pulled in via the Webflow CMS. 

This is great if you want a clean and fully custom video player for tutorials or anything like that. It does use custom Javascript, so you may want to poke around until you have a solid understanding of how everything works. This is probably not the simplest project for new Webflow users, but if you're feeling confident, then definitely go for it (it's not really that intense 😁).

Vimeo Custom Playlist

CMS Vimeo Playlist

A showcase site for an advertising film production company in Munich, specializing in luxury car brands across all traditional and digital channels. The site brings their work front and centre, maximizing opportunities for the user to enjoy short film clips or dive deeper to view in full or discover directors.
**Make sure to hover and explore to see the custom cursor and video interactions**

Hochkant Film

Hochkant Film | Advertising Film Production

Responsive, full-screen, Vimeo video embed

Change out the video link in the "video-embed" element nested in the "video-wrap" div

Background Video Embed

background-video-embed

Embed Vimeo videos in your projects and freely resize them, customize the player, or completely hide it without paying a subscription. Check the embed in the page and the code in the page settings to personalize it.

Author: https://codepen.io/henripeetsmann/pen/KpVVLq

••••••••••••••••••••••••••••••

𝗣𝗿𝗼𝘁𝗼𝗰𝗼𝗿𝗲 𝗶𝘀 𝗮 𝗽𝗿𝗼𝗱𝘂𝗰𝘁 𝗱𝗲𝘀𝗶𝗴𝗻 𝘀𝘁𝘂𝗱𝗶𝗼 𝘁𝗵𝗮𝘁 𝗰𝗿𝗲𝗮𝘁𝗲𝘀 𝗺𝗮𝗴𝗶𝗰 𝗳𝗼𝗿 𝗰𝗼𝗺𝗽𝗮𝗻𝗶𝗲𝘀 𝗮𝗻𝗱 𝗺𝗮𝗸𝗲𝗿𝘀 𝗮𝗿𝗼𝘂𝗻𝗱 𝘁𝗵𝗲 𝘄𝗼𝗿𝗹𝗱. 𝗖𝗼𝗻𝘁𝗮𝗰𝘁 𝗵𝗲𝗹𝗹𝗼@𝗽𝗿𝗼𝘁𝗼𝗰𝗼𝗿𝗲.𝗰𝗼 𝗳𝗼𝗿 𝗶𝗻𝗾𝘂𝗶𝗿𝗶𝗲𝘀. 𝗜𝗳 𝘁𝗵𝗶𝘀 𝗽𝗿𝗼𝗷𝗲𝗰𝘁 𝗶𝗻𝘀𝗽𝗶𝗿𝗲𝗱 𝘆𝗼𝘂, 𝗽𝗹𝗲𝗮𝘀𝗲 𝗳𝗼𝗹𝗹𝗼𝘄 𝘂𝘀 𝗼𝗻 𝗪𝗲𝗯𝗳𝗹𝗼𝘄 𝗮𝗻𝗱 𝗯𝗲𝘆𝗼𝗻𝗱...

◉ 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 - www.protocore.co
◉ 𝗧𝘄𝗶𝘁𝘁𝗲𝗿 - www.twitter.com/theprotocore
◉ 𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺 - www.instagram.com/theprotocore

Vimeo Hack

Vimeo Hack • Customize & Resize

Gigantic

We make films that captivate viewers, shape our modern culture, and resonate for years to come. Explore the creativity of film, commercial, and new media.

IndependentMedia

Independent Media

This is how to use a Vimeo video as background video in Weblow. You can change the video easily within CMS (Editor).

Vimeo Background Video

vimeo-background-video

Showreelz 🎦 is a creative feed showcasing inspiring and notable design videos. It's a new gallery website, like SiteInspire or Awwwards, but for design videos! 

Curated by Ales Nesetril (@alesnesetril), it aims to promote creativity, quality work, and design craft. Browse content in categories such as UX/UI, motion design, 3D, and more, and get inspired today. ✌️

Built with Webflow using native features (CMS) and Cloudinary for video hosting/streaming. 

Read the full story - https://alesnesetril.substack.com/p/3-two-new-projects-in-progress-

Showreelz

Showreelz - Video & Motion Design Inspiration

Canopy creates award-winning marketing and communications content for leading brands and agencies.

This really simple and clean portfolio showcases the fantastic work they do.
Horizontal scrolling homepage.

Canopy Studio

View docs at https://github.com/vimeo/player.js

Vimeo Video Player

Creative Mules

If you've ever tried to add a background video to your website using Webflow's native solution, you might have run into some issues. The compression can often result in poor resolution, or worse, a slow-loading website due to the large file size. And adding background videos via CMS only really works with a Vimeo Pro account....

But fear not! Our former Webflow wizard, Artem, came up with an awesome workaround:  tool that can create Webflow-friendly Dropbox-links.

Be aware that Dropbox has a fair use policy and is not hosting in the true sense, links are bandwidth limited. We recommend to use this hack for small-scale websites and landing pages.

Just drop, copy, and paste the link, and voila! You've got yourself a magic solution for adding background videos to your website. We're always looking for ways to make our projects better and more user-friendly, and this is just one example of the creative problem-solving our team is capable of.



Dropbox Video Converter [Clonable]

Dropbox Video to Webflow

This project shows how you can play and pause videos on click for Vimeo, YouTube, and Wistia! Now you can play and pause videos on events like modal open and close. 

Video Play/Pause on Modal

video-play-pause-on-modal

Simple but useful portfolio for a Sound Designer/Composer. 

PS.: Webflow super fast pace design/development process allows us to create from scratch a fully dynamic portfolio website in 1-3 days. Absolute brilliant results and flexibility on such short time  😘

Mateus Gageiro - Sound Designer/Composer

Sound Designer Portfolio

Memberstack

In this project and tutorial, I wanna show you how you can use  Memberstack data attributes to gate access to an element. In this example, we'll gate access to a video.

Premium Video

Members-Only Video

Linkz.ai instantly adds immersive hyperlink previews to your website on Webflow. Clicking on hyperlinks no longer makes visitors leave your website. Linkz.ai extracts & presents information behind hyperlinks into smart popups, allowing visitors to see hyperlinks without leaving your website. 

Make visitors happy & engaged so that they have no reason to leave. Install & try in 2 minutes on https://linkz.ai

Linkz.ai • Automatic link preview on hover

Emmett Armstrong

Creative studio website for Avey Creative. This project includes a CMS for Vimeo video IDs for easy swapping, and uses Jetboost.io (not included the showcase version) for filtering.

Avey Creative

avey-creative-template

As a digital creator, we're on a mission to build a better tomorrow for all people and the planet alike. With a particular interest in delivering thought provoking and actionable digital experiences, not built for the world we know today... but for the world we will meet tomorrow.

Discover vimeo websites built by the Webflow community

Discover vimeo websites built by the Webflow community