> 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/nc/media/background-video.md).

# Background Video

## Goals

Provide the functionality of the native Webflow Background Video element;

* Provide full background video support
* Autoplay muted option 
* Customizable play / pause buttons
* Styling 

Plus;

* The ability to use off-hosted videos 
* The ability to customize the play / pause buttons 
* Support for audio 

## Demonstration

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

## Usage Notes

### Dependencies

No dependencies.&#x20;

{% hint style="warning" %}
Currently this component does not depend on SA5's Components lib, however we'll likely add this to support added features.&#x20;
{% endhint %}

### Properties

Set the properties according the configuration you want.&#x20;

<table><thead><tr><th width="200.33331298828125">Property</th><th>Usage </th><th></th></tr></thead><tbody><tr><td><strong>GENERAL</strong> </td><td></td><td></td></tr><tr><td>MP4 Url</td><td>The MP4 url to play. </td><td>Can be hosted anywhere.  You can also find and use the Url of a Background Video that was uploaded.</td></tr><tr><td>WEBM Url</td><td>Optional. The WEBM url to play.</td><td></td></tr><tr><td><strong>SETTINGS</strong></td><td></td><td></td></tr><tr><td>Play &#x26; Pause Buttons</td><td>Set to visible if you want these to appear. </td><td>Defaults to hidden. If enabled, make certain to set an ID below, for script support. </td></tr><tr><td>Autoplay</td><td>Set to true if you want autoplay, empty this field if you do not. </td><td>Defaults to true.  Make sure to combine with muted = true.<br><br><em>Currently it's not possible to disable autoplay due to the way Webflow handles boolean properties.</em> See notes below. </td></tr><tr><td>Muted</td><td>Set to true if you want muted, empty this field if you do not. </td><td>Defaults to true. </td></tr><tr><td>Loop</td><td>Set to true if you want looping, empty this field if you do not. </td><td>Defaults to true. </td></tr><tr><td><strong>STYLING</strong> </td><td></td><td></td></tr><tr><td>Class</td><td>Optional, allows you to add a custom class for sizing and z-index control. </td><td>Make certain to keep the default classes as well, these are important for operation of the control. </td></tr><tr><td>Pause Button Image</td><td>The pause button image you want to show. </td><td>Defaults to Webflow's native element SVG. </td></tr><tr><td>Play Button Image</td><td>The pause button image you want to show. </td><td>Defaults to Webflow's native element SVG. </td></tr><tr><td>Style</td><td>Optional. Allows a direct style string.</td><td>Convenient for simple styling such as height: 500px; z-index: 1; </td></tr><tr><td><strong>ADVANCED</strong> </td><td></td><td></td></tr><tr><td>ID</td><td>Optional. An ID for control.</td><td>This is needed if you enable Play / Pause buttons. </td></tr></tbody></table>

## Troubleshooting&#x20;

### Video isn't autoplaying&#x20;

Make sure the autoplay field is set to true.&#x20;

Make sure the muted field is set to true.&#x20;

### Video won't appear

In some containers, the video may be obstructed.  Add z-index: 1 to styling.&#x20;

## Dev Team Notes

<https://webflow-core-components.design.webflow.com/?pageId=689aaeddc2d58b0826fb2d1d>

## Future&#x20;

Support Autoplay = false. *Currently it's not possible to disable autoplay due to the way Webflow handles boolean properties.*&#x20;

Consider pre-load options&#x20;

Consider streaming options&#x20;

Improve placeholder image controls &#x20;

Automate ID generation &#x20;

Event triggers&#x20;