> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/background-video.md).

# Background Video ✅

{% hint style="success" %}
**RELEASED** in Sygnal Media v0.1.4 
{% endhint %}

<figure><img src="/files/RZVRnGwKzWjV7zpEI388" alt=""><figcaption></figcaption></figure>

## Goals&#x20;

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

## Feature Comparison&#x20;

The code component approach adds a few useful capabilities.&#x20;

|                                                        | 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                                   | <p>✅ YES  <br>Auto detect on load <br>Landscape - 16:9, 4:3, 21:9<br>Square - 1:1 <br>Portrait - 9:16</p>                   | <p>✅ YES <br>Must be manually sized in the designer with a class. Can use ratio control there. </p> |
| Direct poster image control                            | ✅ YES                                                                                                                       | ⛔ No, auto-generated from the video                                                                 |
| Detects prefers-reduced-motion and suppresses autoplay | ⚠️ NOT YET- planned.                                                                                                        | ✅ YES                                                                                               |

## Demonstration

{% embed url="<https://webflow-core-component-test.webflow.io/background-video>" %}

## Properties

<table><thead><tr><th width="190">Property</th><th width="121.333251953125">Type</th><th>Description</th></tr></thead><tbody><tr><td>Video URL (MP4)</td><td>Text, URL</td><td>Link to an external MP4, or or to the CDN URL generated by Webflow's Background Video component. </td></tr><tr><td>Video URL (WEBM)</td><td>Text, URL</td><td>Link to an external WEBM, or or to the CDN URL generated by Webflow's Background Video component. </td></tr><tr><td>Poster Image</td><td>Image</td><td>Specify the exact poster image you want.  Make sure it works for the aspect ratio you choose.</td></tr><tr><td>Aspect Ratio</td><td>Variant</td><td>Include auto-detection from the source video, on load.</td></tr><tr><td>Show Controls</td><td>Boolean</td><td>Show or hide the play/pause buttons. </td></tr><tr><td>Debug</td><td>Boolean</td><td>For console logging</td></tr></tbody></table>

## Future&#x20;

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

## Technical Notes&#x20;

* Component type: **Standard**&#x20;

<details>

<summary>Reference Background Video HTML </summary>

```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>

```

</details>