Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.

Proprietà

classicnonesharpsofttvnoiseenumSpecifies if the video has a noise overlay effect

autometadatanonepreloadenumSpecifies if and how the author thinks the video should be loaded when the page loads. Note: The preload attribute is ignored if autoplay is present

autoplayautoplaybooleanSpecifies that the video will start playing as soon as it is ready

looploopbooleanSpecifies that the video will start over again, every time it is finished

mutedmutedbooleanSpecifies that the audio output of the video should be muted

posterstringSpecifies an image to be shown while the video is downloading

srcstringSpecifies the URL of the video file

Panoramica

The <mds-video-wall> web component is the Magma Design System’s full-bleed background video surface, used to render an autoplaying, looping ambient video behind foreground content. It wraps the native <video> element, adding an optional grain/noise overlay and a dedicated content layer for captions or call-to-action overlays.

Semantic Behavior

Ambient by default: autoplay, loop and muted are all true out of the box, producing a self-contained background loop with no controls and no audio - the configuration browsers require for autoplay to be honored. When the operating system asks for reduced motion, the video is hidden.Decorative video: The footage is treated as presentation only; meaningful information must live in the content slot, not in the video itself.Noise overlay: When noise is anything other than 'none', a decorative grain layer is rendered above the video; with noise="none" the layer is omitted entirely.Conditional content layer: The content overlay wrapper is shown only while a slot="content" child is present, also when it is added after the first render, so an empty overlay never affects layout.Default slot is fallback text: The default (unnamed) slot is projected inside the <video> element and is intended for the browser-support fallback message shown when video playback is unavailable.Preload is conditional: preload only takes effect when autoplay is disabled; the browser ignores it while autoplay is active.

Properties & Visual Configurations

This component does not use the shared variant / tone ladders; its props map closely to the underlying native <video> attributes plus the Magma-specific overlay.

Other behavioral props

noise selects the texture/strength of the grain overlay ('classic', 'sharp', 'soft', 'tv'); choose the style that matches the intended mood, or 'none' to disable the effect.poster is the still image shown before the footage is ready - pick a frame that reads well on its own, since it is the first thing users see.preload hints how aggressively the file is fetched on page load; relevant only when autoplay is off.src is the URL of the video file driving the wall.