Canvas Docs

Background Video / Audio

A self-hosted looping video or audio layer for a hero, section background or designed player. Emits just the media element, so the wrapper that positions it stays yours. It is shown in the block inserter as Background Video / Audio and registered as canvas-core/background-video.

Select the block on a page and its own settings open in the sidebar, in the panels below:

The Background Video / Audio settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

  • Media ElementDefaultVideo

    Audio builds the same element for sound: a track behind a designed player bar. The poster and inline-playback settings only apply to video.

    ChoicesVideoAudio

  • Media SourcesDefaultEmpty

    One row per file. Browsers play the first source they support, so put the smallest widely-supported file first. Pick the file from the Media Library, or paste a URL for a file hosted elsewhere.

    Each row of Media Sources takes:

    • Media FileDefault0

      The file this row plays, chosen from your media library.

    • File URLDefaultEmpty

      Used only when no Media File is selected above.

    • FormatDefaultMP4

      What kind of file this row points at. A browser reads it to decide whether it can play the file before downloading any of it, so it has to match.

      ChoicesMP4WebMOggMP3 (audio/mpeg)MP3 (audio/mp3)Ogg (audio)WAV

  • Poster ImageDefault0

    Shown until the video can paint its first frame. Pick the frame the design opens on so there is no flash.

  • Poster Image URLDefaultEmpty

    Used only when no Poster Image is selected above.

Settings

  • Load Only When Scrolled Into ViewDefaultOff

    Holds the download back until the element scrolls into view, so a video further down the page costs an arriving visitor nothing. Add the class named lazy in the Advanced panel, or the loader will not find this element.

  • PreloadDefaultAuto - fetch the video straight away

    A background video below the fold is usually better on None or Metadata.

    ChoicesAuto - fetch the video straight awayMetadata onlyNone - wait until playback starts

  • LoopDefaultOn

    Starts the file again the moment it ends, so a background layer never comes to a stop.

  • AutoplayDefaultOff

    Browsers only autoplay a muted video, so leave Muted on when this is enabled.

  • MutedDefaultOn

    Plays with the sound off. Browsers refuse to start a video by themselves unless it is silent, so a background layer needs this left on.

  • Play Inline On MobileDefaultOn

    Without this, iOS takes the video fullscreen instead of leaving it in the background.

  • Show Player ControlsDefaultOff

    Off for a background layer: the controls would sit on top of the section content.

  • Hide From Screen ReadersDefaultOff

    Use when the video is purely decorative and the section says everything in text.

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Content: Cascading Images, Charts, Circle Stack, Clients, Data Tables, Google Map.

Was this page helpful?