Video
ready
Video element component. This component only supports video from Widen.
Loading
Code
HTML
import { NbhdVideo } from '@fbin-web/neighborhood-core';<nbhd-video
src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4">
</nbhd-video>React
import { NbhdVideo } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdVideo src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4"></NbhdVideo>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
src
|
src
|
string
|
Video source URL. Supports Widen URLs which are automatically formatted | |
poster
|
poster
|
string
|
Poster image URL displayed before video plays. | |
alt
|
alt
|
string
|
Accessible label describing the video content. | |
cssClass
|
css-class
|
string
|
Additional CSS class(es) to apply to the video element. | |
loop
|
loop
|
boolean
|
false
|
Loop the video continuously after it completes. |
autoplay
|
autoplay
|
boolean
|
false
|
Autoplay the video with playsinline enabled. Displays play/pause control overlay when enabled. |
muted
|
muted
|
boolean
|
false
|
Mutes the video audio. Automatically enabled when autoplay is true. |
controls
|
controls
|
boolean
|
false
|
Display native video controls. When enabled, autoplay functionality is disabled. |
noA11y
|
no-a11y
|
boolean
|
false
|
Disables accessibility features for the video component. |
CSS Parts
Styleable parts exposed for CSS custom styling using ::part() selector
| Name | Description |
|---|---|
base
|
The component's main wrapper div container. |
control
|
The play/pause button control overlay (visible when autoplay is enabled without controls). |
icon
|
The SVG icons within the play/pause button (play and pause icons). |
video
|
The HTML video element that displays the video content. |
source
|
The source element inside the video that defines the video file. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-video-blockSize
|
var(--nbhd-visual-blockSize, auto) |
--nbhd-video-display
|
var(--nbhd-visual-display, block) |
--nbhd-video-inlineSize
|
var(--nbhd-visual-inlineSize, 100%) |
--nbhd-video-insetBlockEnd
|
var(--nbhd-visual-insetBlockEnd, auto) |
--nbhd-video-insetBlockStart
|
var(--nbhd-visual-insetBlockStart, auto) |
--nbhd-video-insetInlineEnd
|
var(--nbhd-visual-insetInlineEnd, auto) |
--nbhd-video-insetInlineStart
|
var(--nbhd-visual-insetInlineStart, auto) |
--nbhd-video-maxBlockSize
|
var(--nbhd-visual-maxBlockSize, none) |
--nbhd-video-maxInlineSize
|
var(--nbhd-visual-maxInlineSize, 100%) |
--nbhd-video-minBlockSize
|
var(--nbhd-visual-minBlockSize, auto) |
--nbhd-video-minInlineSize
|
var(--nbhd-visual-minInlineSize, auto) |
--nbhd-video-objectFit
|
var(--nbhd-visual-objectFit, fill) |
--nbhd-video-position
|
var(--nbhd-visual-position, static) |
--nbhd-video-transform
|
var(--nbhd-visual-transform, none) |
--nbhd-video-transitionDelay
|
var(--nbhd-visual-transitionDelay, 0s) |
--nbhd-video-transitionDuration
|
var(--nbhd-visual-transitionDuration, 0s) |
--nbhd-video-transitionProperty
|
var(--nbhd-visual-transitionProperty, all) |
--nbhd-video-transitionTimingFunction
|
var(--nbhd-visual-transitionTimingFunction, ease) |