Video
ReadyVideo element component. This component only supports video from Widen.
Preview
Code
Install
npm install @fbin-web/neighborhood-core
Import
import { NbhdVideo } from '@fbin-web/neighborhood-core';
Usage
<nbhd-video
src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4">
</nbhd-video>
Install
npm install @fbin-web/neighborhood-react
Import
import { NbhdVideo } from '@fbin-web/neighborhood-react';
Usage
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. Embeds use it as the iframe title (default "Video player"). |
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. Autoplaying video is muted and can always be paused: MP4/Widen video gets a pause button, and YouTube/Vimeo embeds keep the player controls. |
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. |
playLabel | play-label | string | Play video | Accessible name of the play button shown on autoplaying video. |
pauseLabel | pause-label | string | Pause video | Accessible name of the pause button shown on autoplaying video. |
No properties match.
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). |
embed | The iframe used for embedded YouTube and Vimeo videos. |
video | The HTML video element that displays the video content. |
source | The source element inside the video that defines the video file. |
No css parts match.
nbhd-video::part(base) {
/* your styles */
}CSS Properties
Set these on nbhd-video or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.
Video
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-video-blockSize | — | 100% |
|
--nbhd-video-control-insetBlockEnd | — | 12px |
|
--nbhd-video-control-insetInlineStart | — | 12px |
|
--nbhd-video-control-position | — | absolute |
|
--nbhd-video-control-svg-blockSize | --nbhd-size-icon-xl | 32px |
|
--nbhd-video-control-svg-inlineSize | --nbhd-size-icon-xl | 32px |
|
--nbhd-video-control-zIndex | --nbhd-z-1 | 1 |
|
--nbhd-video-display | --nbhd-media-display | block |
|
--nbhd-video-embed-blockSize | — | 100% |
|
--nbhd-video-embed-inlineSize | — | 100% |
|
--nbhd-video-inlineSize | — | 100% |
|
--nbhd-video-insetBlockEnd | — | 0 |
|
--nbhd-video-insetBlockStart | — | 0 |
|
--nbhd-video-insetInlineEnd | — | 0 |
|
--nbhd-video-insetInlineStart | — | 0 |
|
--nbhd-video-objectFit | — | cover |
|
--nbhd-video-position | — | absolute |
|
--nbhd-video-transform | --nbhd-media-transform | none |
|
--nbhd-video-transitionDelay | --nbhd-media-transitionDelay | 0s |
|
--nbhd-video-transitionDuration | --nbhd-media-transitionDuration | 0s |
|
--nbhd-video-transitionProperty | --nbhd-media-transitionProperty | all |
|
--nbhd-video-transitionTimingFunction | --nbhd-media-transitionTimingFunction | ease |
|
--nbhd-video-wrapper-aspectRatio | — | 16/9 |
|
--nbhd-video-wrapper-blockSize | — | 100% |
|
--nbhd-video-wrapper-display | — | block |
|
--nbhd-video-wrapper-inlineSize | — | 100% |
|
--nbhd-video-wrapper-insetBlockEnd | — | auto |
|
--nbhd-video-wrapper-insetBlockStart | — | auto |
|
--nbhd-video-wrapper-insetInlineEnd | — | auto |
|
--nbhd-video-wrapper-insetInlineStart | — | auto |
|
--nbhd-video-wrapper-minBlockSize | — | auto |
|
--nbhd-video-wrapper-minInlineSize | — | auto |
|
--nbhd-video-wrapper-objectFit | — | cover |
|
--nbhd-video-wrapper-position | — | relative |
|
--nbhd-video-zIndex | --nbhd-z-ground | 0 |
No video match.
Media
| Property | Token | Value | Copy |
|---|---|---|---|
--nbhd-media-display | — | block |
|
--nbhd-media-host-blockSize | — | 100% |
|
--nbhd-media-host-display | — | block |
|
--nbhd-media-host-inlineSize | — | 100% |
|
--nbhd-media-transform | — | none |
|
--nbhd-media-transitionDelay | — | 0s |
|
--nbhd-media-transitionDuration | — | 0s |
|
--nbhd-media-transitionProperty | — | all |
|
--nbhd-media-transitionTimingFunction | --nbhd-motion-easing-standard | ease |
No media match.