@maggioli-design-system/mds-video-wall
v2.3.2
Published
mds-video-wall is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Keywords
Readme
mds-video-wall
This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------- |
| autoplay | autoplay | Specifies that the video will start playing as soon as it is ready | boolean | true |
| loop | loop | Specifies that the video will start over again, every time it is finished | boolean | true |
| muted | muted | Specifies that the audio output of the video should be muted | boolean | true |
| noise | noise | Specifies if the video has a noise overlay effect | "classic" \| "none" \| "sharp" \| "soft" \| "tv" \| undefined | 'none' |
| poster | poster | Specifies an image to be shown while the video is downloading | string \| undefined | undefined |
| preload | preload | Specifies 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 | "auto" \| "metadata" \| "none" \| undefined | 'auto' |
| src | src | Specifies the URL of the video file | string \| undefined | undefined |
Slots
| Slot | Description |
| ----------- | ------------------------------------------------------------------------------------------------ |
| "content" | Add video content overlay here, add text string, HTML elements or components to this slot. |
| "default" | Write browser support missing message here. |
CSS Custom Properties
| Name | Description |
| ----------------------------------------- | -------------------------------------------------- |
| --mds-video-wall-noise-background-color | Sets the background-color of the noise when active |
| --mds-video-wall-noise-background-size | Sets the background-color of the noise when active |
| --mds-video-wall-noise-filter | Sets filter to manipulate pattern noise color |
| --mds-video-wall-video-fit | Sets the object-fit of the video stream |
Built with love @ Gruppo Maggioli from R&D Department
