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

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

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

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

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

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

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

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

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 • Link Auto-Previews

OnRamp Data

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.

Bien Studio

Bien Studio 2022

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

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

Institute is a creative studio founded on this simple principle: Do good work, that does good, with good people.

Design: Nate Brown, Studio Institute
Development: Josh Jacobs, joshwork.com

STUDIO INSTITUTE

We developed this website for a wedding videography company in Northern California. Their original website was outdated and not optimized for mobile. This new site is built to showcase their video portfolio and make it easy for potential customers to send requests.

Discover vimeo websites built by the Webflow community

Discover vimeo websites built by the Webflow community