Video: background section
The Video: background section plays a muted, looping video behind a heading, text and button in Kingdom, with a fallback image.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Video: background section plays a muted video in a loop across the page, with a heading, a text and a button on top. The video is a file you upload to Shopify, and a fallback image covers the cases where it cannot play.
Where to find it: select Add section in the theme editor, then choose Video: background (Add section category Media & galleries).
Setting up the video
Add the section
In the theme editor, select Add section and choose Video: background.
Upload the video
Select Video and upload an MP4 file, or pick one from Shopify admin → Content → Files. Shopify hosts the video. Keep it short and without sound: Kingdom always plays it muted, in a loop.
Add a fallback image
Upload a Fallback image, ideally a still from the video. Kingdom shows it when the video cannot load.
Set the height
Set Video height for desktop and Video mobile height for screens 948 px wide or less: Natural (16:9) keeps the video's usual shape, Large is 70 percent of the screen height and Full the whole screen. Large and Full crop the sides of the video.
The video starts when the section scrolls into view. A video link from YouTube or Vimeo does not work here; for those, use the Video: popup section.
Text on the video
The content is built from three blocks, each used once, in the order you drag them:
- Heading: the title, with a Heading size (Regular, Large or Extra large) and a Heading tag.
- Text: a paragraph, with its own size setting. The editor labels it Heading size too; Large and Extra large show the text in heading sizes.
- Button: a solid button with a Button label, a Button link and a Button size (Regular or Large).
Section settings for the text:
- Text container width limits how wide the text may run: Medium (half the section, the default), Large (75 percent) or Full. Phones always use the full width.
- Text alignment places the text in one of nine positions over the video (default Left bottom).
- Custom text color sets the text and the button color. Background overlay lays a color over the video at 36 percent opacity, so light text stays readable.
- Enable inner content spacing (default off) adds side padding around the video. See General section settings.
Why does my background video not play on my phone?
Because the phone blocks autoplay. Phones can stop videos from playing on their own, for example in low power mode, with data saving on, or on a slow connection. Kingdom 6.1.3 improved autoplay in Chrome on mobile, but the phone has the last word. Upload a Fallback image, so customers see a picture where the video cannot load.
Why is my video cropped?
Because Video height or Video mobile height is Large or Full. The video then fills a share of the screen height and loses its sides. Choose Natural (16:9) to show the whole video, or film with the important part in the center.
Can I use a YouTube video as a background?
No. The Video: background section plays only video files uploaded to Shopify. Download the video in MP4 and upload it, or use the Video: popup section, which plays YouTube and Vimeo links when a customer selects its image.
All Video: background settings
Every setting in this group, with its type and default.
Accepts these blocks: Heading, Text and Button.
Video (video): Selects a video file uploaded to Shopify. It plays muted and in a loop, from when the section scrolls into view.
Fallback image (image): Shows in place of the video when the video cannot load. Use a still from the video.
Video: background section: Size & alignment
Where to find it: Video: background → Size & alignment
Video height (dropdown, default: Uncropped: Natural (16:9)): Sets the section height on screens wider than 948 px: Natural keeps the 16:9 shape, Large is 70 and Full 100 percent of the screen height. Large and Full crop the video. Options: Uncropped: Natural (16:9), Cropped: Large, Cropped: Full.
Video mobile height (dropdown, default: Uncropped: Natural (16:9)): Sets the section height on screens 948 px wide or less. Options: Uncropped: Natural (16:9), Cropped: Large, Cropped: Full.
Text container width (dropdown, default: Medium): Limits how wide the text runs over the video. Phones always use the full width. Options: Medium, Large, Full.
Text alignment (dropdown, default: Left bottom): Places the text over the video. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Video: background section: Colors
Where to find it: Video: background → Colors
Custom text color (color, default: transparent): Sets the color of the text and the button.
Background overlay (color, default: transparent): Lays this color over the video at 36 percent opacity.
Video: background section: Gutter
Where to find it: Video: background → Gutter
Enable inner content spacing (checkbox): Adds side padding around the video and a space below it. Off, the video runs edge to edge.
Heading block
Where to find it: Video: background → Add block → Heading
One Heading block per section.
Heading (text field, default: "Talk about your brand").
Heading size (dropdown, default: Regular). Options: Regular, Large, Extra large.
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Text block
Where to find it: Video: background → Add block → Text
One Text block per section.
Text (rich text, default: "Use this text to share information about your brand with your customers. Describe a product, share…").
Heading size (dropdown, default: Regular): Sets the size of the text. Large and Extra large show it in heading sizes. Options: Regular, Large, Extra large.
Button block
Where to find it: Video: background → Add block → Button
One Button block per section.
Button label (text field, default: "Button label").
Button link (link).
Button size (dropdown, default: Regular): Sets the size of the button. Options: Regular, Large.
Related pages
- Video: popup section: a YouTube or Vimeo video that plays when a customer selects its image.
- Troubleshoot images and videos: more answers about videos.
- Slideshow: vertical section: full-screen images with text.
- General section settings: custom colors and inner content spacing.