CMS Connected Background Videos

In this Boost we take a look at how we can leverage code already written by Webflow engineers to make CMS Connected Background Videos possible. Normally, Webflow only allows us to link to YouTube or Vimeo videos within the CMS, but we can use a custom code embed to drop in our own HTML. We'll use Webflow to host the videos in this example, but you could host elsewhere like how I show in my videos on Dropbox and Amazon Web Services (AWS).

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

Inside </body> tag

<div
  data-video-urls='VIDEO-URL-MP4,VIDEO-URL-WEBM'
  data-autoplay="true"
  data-loop="true"
  data-wf-ignore="true"
  class="w-background-video w-background-video-atom"
>
  <video
    autoplay=""
    loop=""
    muted=""
    playsinline=""
    data-wf-ignore="true"
    data-object-fit="cover"
  >
    <source
      src='VIDEO-URL-MP4'
      data-wf-ignore="true"
    />
    <source
      src='VIDEO-URL-WEBM'
      data-wf-ignore="true"
    />
  </video>
</div>