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	✅ YES
Supports Fallback Image	✅ YES	✅ YES
Play/Pause button	✅ YES, optional	✅ YES, optional
Autoplay	✅ YES	✅ 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

• Component type: Standard

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>