Background Video ✅

A simple background video player with some cool enhancements.

RELEASED in Sygnal Media v0.1.4

Goals

Easy replacement for the native Background Video element
External video hosting, to improve quality, size & bandwidth efficiency
CMS bindable, for e.g. Service-page-specific videos with the URL stored in the CMS
Direct control over the poster image art

Feature Comparison

The code component approach adds a few useful capabilities.

Code Component

Native Element

Upload Video directly in Webflow

⛔ No. You can use the native Background Video element to the upload, publish and then get the CDN URLs for the video files.

✅ YES

Support external video URLs

✅ YES

⛔ No

CMS Bindable

✅ YES

⛔ No

Supports MP4 & WEBM

✅ YES

Supports Fallback Image

✅ YES

Play/Pause button

✅ YES, optional

Autoplay

✅ YES

Automatic aspect-ratio detection

✅ YES

⛔ No

Aspect ratio control

✅ YES Auto detect on load Landscape - 16:9, 4:3, 21:9 Square - 1:1 Portrait - 9:16

✅ YES Must be manually sized in the designer with a class. Can use ratio control there.

Direct poster image control

✅ YES

⛔ No, auto-generated from the video

Detects prefers-reduced-motion and suppresses autoplay

⚠️ NOT YET- planned.

✅ YES

Demonstration

Background Videowebflow-core-component-test.webflow.io

Properties

Property

Type

Description

Video URL (MP4)

Text, URL

Link to an external MP4, or or to the CDN URL generated by Webflow's Background Video component.

Video URL (WEBM)

Text, URL

Link to an external WEBM, or or to the CDN URL generated by Webflow's Background Video component.

Poster Image

Image

Specify the exact poster image you want. Make sure it works for the aspect ratio you choose.

Aspect Ratio

Variant

Include auto-detection from the source video, on load.

Show Controls

Boolean

Show or hide the play/pause buttons.

Debug

Boolean

For console logging

Future

Might add audio support on user interaction, an unmute button, for external streams that contain audio content
Considering streaming support for longer videos, Webcams, live broadcasts, etc.
Possibly play / pause icon control
Loop option
Autoplay option
Prefers-reduced-motion
iOS low-power / hide button?

Technical Notes

Reference Background Video HTML

<div
  data-poster-url="https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-poster-00001.jpg"
  data-video-urls="https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-transcode.mp4,https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-transcode.webm"
  data-autoplay="true"
  data-loop="true"
  data-wf-ignore="true"
  class="w-background-video w-background-video-atom"
>
  <video
    id="44628f0c-80c1-0ad1-f39a-11b41701bdc5-video"
    autoplay
    loop
    muted
    playsinline
    data-wf-ignore="true"
    data-object-fit="cover"
    style="background-image:url('https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-poster-00001.jpg')"
  >
    <source
      src="https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-transcode.mp4"
      data-wf-ignore="true"
    />
    <source
      src="https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-transcode.webm"
      data-wf-ignore="true"
    />
  </video>

  <noscript>
    <style>
      [data-wf-bgvideo-fallback-img] {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        [data-wf-bgvideo-fallback-img] {
          position: absolute;
          z-index: -100;
          display: inline-block;
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
    </style>
    <img
      data-wf-bgvideo-fallback-img="true"
      src="https://cdn.prod.website-files.com/682807c9b85f3c57bfda5c16%2F68e55d7a62e90c8e621230dd_programmer-poster-00001.jpg"
      alt=""
    />
  </noscript>

  <div aria-live="polite">
    <button
      type="button"
      data-w-bg-video-control="true"
      aria-controls="44628f0c-80c1-0ad1-f39a-11b41701bdc5-video"
      class="w-backgroundvideo-backgroundvideoplaypausebutton w-background-video--control"
    >
      <span>
        <img
          src="https://cdn.prod.website-files.com/6022af993a6b2191db3ed10c/628299f8aa233b83918e24fd_Pause.svg"
          loading="lazy"
          alt="Pause video"
        />
      </span>
      <span hidden>
        <img
          loading="lazy"
          alt="Play video"
          src="https://cdn.prod.website-files.com/6022af993a6b2191db3ed10c/628298b20ae0236682d4b87f_Play-24.svg"
        />
      </span>
    </button>
  </div>
</div>

PreviousRive ✅NextSpline ✅

Last updated 12 hours ago