Video Block

Use Video with a clear purpose

YouTube or uploaded video with customizable playback. This guide covers the settings exposed by the current LunaSites block, the Style Panel areas that can be customized, and the checks that keep the result dependable across breakpoints.

Add a Video

1. Open Add block and choose Video from the Media category.

2. Start with the content or data source and confirm that the block communicates one clear role.

3. Configure layout and behavior before applying local visual overrides.

4. Use the Style Panel only for intentional block-specific differences; reuse a preset when the same treatment appears repeatedly.

5. Preview the real result at desktop, tablet, and mobile widths, including hover, focus, active, empty, and error states when relevant.

Configure the Video

Video

Video Video Poster Size Options include Natural, Small width (320px), Medium width (520px), Large width (760px), Content width, Custom width.

Playback

Autoplay The default is false. Loop The default is false. Muted The default is true. Playback Speed Options include 0.5x, 0.75x, 1x (Normal), 1.25x, 1.5x, 2x. Show Controls The default is true. Play/Pause on Click The default is true.

Customization

Fit The default is cover. Background Crop The default is . Overlay The default is false. Overlay Color Options include Black, Background, Dark 2, Dark 1, Primary, Accent. Overlay Opacity The default is 40. Fade Direction The default is none. Fade Strength The default is 50.

Additional settings

Custom Width The default is 520. Is YouTube The default is false. Desktop Focal Point X The default is 50. Desktop Focal Point Y The default is 50. Tablet Focal Point X Tablet Focal Point Y Mobile Focal Point X Mobile Focal Point Y

Style Panel

The available styling areas are Video. Complete the default state first, then add hover or active differences only where the target supports them. Keep text, borders, controls, and bounded surfaces readable against the effective page background.

Responsive behavior

Video can be used directly in inline content and inside a section grid. In a grid it follows the frame-driven sizing model and starts at 12 columns by 8 rows. Keep the frame compact and let real content determine the final height.

Tips & tricks

1. Choose media that carries meaning, then set a deliberate crop or frame.

2. Write useful alternative text or a caption whenever the media communicates information.

3. Check loading behavior and composition at desktop, tablet, and mobile sizes.

4. Test the shortest, longest, empty, and most complex realistic content before considering the design finished.

Accessibility checklist

• Give every meaningful control, image, region, or data value an understandable name or text alternative.

• Preserve keyboard access, visible focus, logical reading order, and sufficient contrast.

• Do not rely on color, motion, shape, or position alone to communicate meaning.

• Check reduced-motion preferences and mobile touch targets whenever the block is interactive.

Common mistakes

• Styling before the content, source, and behavior are correct.

• Oversized frames, accidental empty space, weak contrast, or missing responsive checks.

• Adding decorative or interactive complexity without a clear visitor benefit.

Quick recipe

Add one Video, use the documented defaults as a starting point, replace them with real content, refine only the necessary settings, then verify the rendered block at all three responsive breakpoints.