Video Background

Add YouTube or Vimeo video backgrounds to SectionContainer elements with overlay support.

Basic Setup

Video backgrounds are added to SectionContainer/V1 using params and a required attr:

JSON

{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-skip-background-video-settings": "false"
  },
  "params": {
    "video-bg-url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro",
    "video-bg-type": "youtube"
  }
}

Video Background Properties

Property	Type	Description
`video-bg-url`	string	YouTube or Vimeo video URL
`video-bg-type`	string	`"youtube"` or `"vimeo"`
`video-bg-thumbnail-background`	boolean	Use video thumbnail as fallback
`video-bg-use-background-as-overlay`	boolean	Apply background color as overlay
`video-bg-hide-on-mobile`	boolean	Hide video on mobile devices
`video-bg-style-type`	string	`"offset"` for position control
`video-bg-offset-y`	number	Vertical offset (0-100)

Video with Color Overlay

Add a semi-transparent color overlay on top of the video:

JSON

{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-paint-colors": "lightest",
    "className": "fullContainer bgCoverCenter",
    "style": { "padding-top": 100, "padding-bottom": 100 },
    "data-skip-background-settings": "false",
    "data-skip-background-video-settings": "false"
  },
  "params": {
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "--style-background-color": "rgba(0, 0, 0, 0.7)",
    "video-bg-url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro",
    "video-bg-type": "youtube",
    "video-bg-use-background-as-overlay": true,
    "video-bg-hide-on-mobile": true
  }
}

Tip: When video-bg-use-background-as-overlay is true, the --style-background-color renders as a semi-transparent overlay on top of the video.

Position Control

Adjust the video's vertical position:

JSON

{
  "params": {
    "video-bg-url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro",
    "video-bg-type": "youtube",
    "video-bg-style-type": "offset",
    "video-bg-offset-y": 50
  }
}

Mobile Settings

Video backgrounds can impact mobile performance. Hide them on mobile:

JSON

{
  "params": {
    "video-bg-url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro",
    "video-bg-type": "youtube",
    "video-bg-hide-on-mobile": true,
    "video-bg-thumbnail-background": true
  }
}

Tip: Set video-bg-thumbnail-background to true to show the video thumbnail as a fallback image on mobile.

Complete Example

Full section with video background, overlay, and content:

JSON

{
  "type": "SectionContainer/V1",
  "attrs": {
    "data-paint-colors": "lightest",
    "className": "fullContainer bgCoverCenter",
    "style": { "padding-top": 120, "padding-bottom": 120 },
    "data-skip-background-settings": "false",
    "data-skip-background-video-settings": "false"
  },
  "params": {
    "padding-top--unit": "px",
    "padding-bottom--unit": "px",
    "--style-background-color": "rgba(0, 0, 0, 0.6)",
    "video-bg-url": "https://www.youtube.com/watch?v=W9dfVFwS_Ro",
    "video-bg-type": "youtube",
    "video-bg-thumbnail-background": true,
    "video-bg-use-background-as-overlay": true,
    "video-bg-hide-on-mobile": true,
    "video-bg-style-type": "offset",
    "video-bg-offset-y": 50
  },
  "children": [
    {
      "type": "RowContainer/V1",
      "attrs": { "style": { "width": "1170px" } },
      "children": [
        {
          "type": "ColContainer/V1",
          "params": { "mdNum": 12 },
          "children": [
            {
              "type": "Headline/V1",
              "selectors": {
                ".elHeadline": {
                  "attrs": {
                    "style": { "color": "#ffffff", "text-align": "center" }
                  }
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

Supported Video Platforms

Platform	video-bg-type	URL Format
YouTube	`"youtube"`	`https://www.youtube.com/watch?v=VIDEO_ID`
Vimeo	`"vimeo"`	`https://vimeo.com/VIDEO_ID`