@maggioli-design-system/mds-video-wall
v1.7.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 JavaScirpt framework you are using.
Downloads
586
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 JavaScirpt 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-video-fit
| Sets the object-fit of the video stream |
Built with love @ Gruppo Maggioli from R&D Department