Video Player
draft
A simple video player component that can contain contextual content below the video.
Loading
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
data
|
object
|
Content for component. | ||
prefab
|
prefab
|
boolean
|
false
|
When enabled the component will use the data property for content and not the slots.
|
compact
|
compact
|
boolean
|
false
|
Set the component max-inline-size to --nbhd-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
Data object property is only when the prefab property is enabled.
| Property | Type | Description |
|---|---|---|
media
Required
|
object
|
Media data object. |
content
|
string
|
General content block. |
Slots
Slots are not available when the prefab property is enabled.
| Name | Description |
|---|---|
| content | Content placement. |
| video | Video placement. |
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 |
|---|---|
--nbhd-videoPlayer-marginInline
|
var(--nbhd-space-0) |
--nbhd-videoPlayer-maxInlineSize
|
100% |
--nbhd-videoPlayer-paddingBlock
|
var(--nbhd-space-12) |
--nbhd-videoPlayer-visual-aspectRatio
|
16 / 9 |