Video Player
A simple video player component that can contain contextual content below the video.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
Required
|
object
|
Content for component. | ||
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --neighborhood-maxInlineSize.
|
controls
|
controls
|
boolean
|
false
|
Enabled will display the player controls. When not enabled the video player will autoplay video. |
sd
|
sd
|
boolean
|
false
|
Enabled will display the video player in standard definition (SD) aspect ratio 4:3. |
theme
|
theme
|
primary-light | secondary-light | primary-dark | secondary-dark
|
primary-light
|
Background theme color for main component. |
marginTop
|
margin-top
|
none | small | medium | large
|
none
|
Adjust margin above the component. none = 0 small = 24px medium = 48px large = 96px
|
marginBottom
|
margin-bottom
|
none | small | medium | large
|
none
|
Adjust margin below the component. none = 0 small = 24px medium = 48px large = 96px
|
paddingTop
|
padding-top
|
default | none | small | medium | large
|
default
|
Adjust padding to the top of the component. default = component's top padding none = 0 small = 24px medium = 48px large = 96px
|
paddingBottom
|
padding-bottom
|
default | none | small | medium | large
|
default
|
Adjust padding to the bottom of the component. default = component's bottom padding none = 0 small = 24px medium = 48px large = 96px
|
Data Properties
Main data properties for Video Player
| Property | Type | Description |
|---|---|---|
media
Required
|
object
|
Media data object. |
content
|
string
|
General content block. |
CSS Parts
| Name | Description |
|---|---|
base
|
The main wrapper element. |
base-container
|
The main container element. |
visual
|
The visual container. |
video
|
The video element. |
content
|
The content element. |
Video Player Styling Properties
Available styling CSS Properties for the Video Player component.
| Property | Default Value |
|---|---|
--neighborhood-videoPlayer-marginInline
|
var(--neighborhood-space-0) |
--neighborhood-videoPlayer-maxInlineSize
|
100% |
--neighborhood-videoPlayer-paddingBlock
|
var(--neighborhood-space-12) |
--neighborhood-videoPlayer-visual-aspectRatio
|
16 / 9 |
Content Styling Properties
Available styling CSS Properties for the Content element.
| Property | Default Value |
|---|---|
--neighborhood-content-color
|
inherit |
--neighborhood-content-fontFamily
|
inherit |
--neighborhood-content-fontSize
|
var(--neighborhood-fontSize-regular) |
--neighborhood-content-fontWeight
|
inherit |
--neighborhood-content-marginBlock
|
var(--neighborhood-space-0) var(--neighborhood-space-7) |
--neighborhood-content-textTransform
|
inherit |