Video
ready

Video element component. This component only supports video from Widen.

Example

icon-storybook-default View Storybook
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).
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.