Canvas Docs

YouTube Background

YouTube video playing as an ambient muted background behind overlay content. It is shown in the block inserter as Canvas YouTube Background and registered as canvas-core/youtube-bg.

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

The YouTube Background 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

  • YouTube Video IDDefaultEmpty

    The 11-character ID from the YouTube URL (e.g. youtube.com/watch?v=XXXXXXXX).

  • Overlay ContentDefaultEmpty

    Heading, copy and buttons laid over the video. Leave empty for a bare video band.

Settings

  • Mute VideoDefaultOn

    Play the video without sound. Leave it on: most browsers refuse to start a video that plays by itself with sound.

  • Loop VideoDefaultOn

    Start the clip again as soon as it ends, so the band never sits on a frozen frame.

  • AutoplayDefaultOn

    Start playing as soon as the page loads, without waiting for the visitor.

  • Video QualityDefaultDefault (auto)

    The quality asked of YouTube. Leave it on automatic unless a background band is costing visitors too much bandwidth, since YouTube may serve a different quality anyway.

    ChoicesDefault (auto)Small (240p)Medium (360p)Large (480p)HD 720pHD 1080pHigh Res (4K)

  • Start At (seconds)Default0

    Begin playback partway in: useful for skipping a title card.

  • Stop At (seconds)Default0

    End the loop early. 0 plays to the end of the clip.

  • Section Height (CSS value)Default400px

    How tall the video band stands. A value in vh sizes it against the screen, so 100vh fills the first view.

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

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.

Was this page helpful?