Skip to content

Instantly share code, notes, and snippets.

@ryan-taylor

ryan-taylor/gist:b2e572f012f416191e794a446788f9e2

Last active October 14, 2021 14:47
Show Gist options
  • Save ryan-taylor/b2e572f012f416191e794a446788f9e2 to your computer and use it in GitHub Desktop.
Save ryan-taylor/b2e572f012f416191e794a446788f9e2 to your computer and use it in GitHub Desktop.
Download ZIP
Webflow: Standard object fit video background with Vimeo
Raw
gistfile1.txt
<div class="video-cover">
<video width="100%" muted autoplay playsinline loop data-object-fit="cover">
<source src="https://player.vimeo.com/external/VIMEO_SLUG" type="video/mp4">
<source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
Your browser doesn't support HTML5 video tag.
</video>
</div>
<style>
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-cover video {
object-fit: cover;
}
</style>
@ryan-taylor
Copy link
Author

ryan-taylor commented Oct 14, 2021 •
edited

HTML snippets for adding video backgrounds to Webflow sites using Vimeo as the video content provider.
sourced from a clonable by @emilvillumsen

Replace the VIMEO SLUG with your CMS ID

Google Doc walkthrough here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment