Video Player

Ready

A simple video player component that can contain contextual content below the video.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdVideoPlayer } from '@fbin-web/neighborhood-core';

Usage

<nbhd-video-player>
  <nbhd-video
    slot="media"
    autoplay
    muted
    loop
    class="media-css-class-sld-3"
    src="https://moen.widen.net/content/g0qximw21k/original/Moen-SWN-2023_1080p.mp4">
  </nbhd-video>

  <nbhd-text
    slot="content"
    tag="div">
    Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed
    consectetur. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Curabitur
    blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
    lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
  </nbhd-text>
</nbhd-video-player>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdVideoPlayer } from '@fbin-web/neighborhood-react';

Usage

import { NbhdVideoPlayer, NbhdVideo, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdVideoPlayer>
      <NbhdVideo
        slot="media"
        autoplay
        muted
        loop
        src="https://moen.widen.net/content/g0qximw21k/original/Moen-SWN-2023_1080p.mp4"
        className="media-css-class-sld-3"></NbhdVideo>

      <NbhdText
        slot="content"
        tag="div">
        Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed
        consectetur. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
        Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor
        ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus.
      </NbhdText>
    </NbhdVideoPlayer>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`compact`	`compact`	`boolean`	`false`	Enables compact layout with constrained max-inline-size.
`controls`	`controls`	`boolean`	`false`	Display video player controls. When disabled, video will autoplay, loop, and be muted.
`sd`	`sd`	`boolean`	`false`	Display video player in standard definition (4:3) aspect ratio instead of widescreen (16:9).
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the surface theme applied to the component container.
`marginTop`	`margin-top`	`nonesmallmediumlarge`	`none`	Adjust margin above the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`marginBottom`	`margin-bottom`	`nonesmallmediumlarge`	`none`	Adjust margin below the component. `none` = 0 `small` = 24px `medium` = 48px `large` = 96px
`paddingTop`	`padding-top`	`defaultnonesmallmediumlarge`	`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`	`defaultnonesmallmediumlarge`	`default`	Adjust padding to the bottom of the component. `default` = component's bottom padding `none` = 0 `small` = 24px `medium` = 48px `large` = 96px

Slots

Named slots for customizing video player content

Name	Description
`media`	Custom media content to replace the default video element. Falls back to rendering video from data.media when no slot content is provided.
`content`	Custom content to display below the video player. Falls back to rendering text from data.content when no slot content is provided.

CSS Parts

Styleable parts exposed for CSS custom styling using ::part() selector

Name	Description
`base`	The main wrapper element for the entire video player component.
`container`	The element used to layout the media and content areas.
`media`	The media wrapper that contains the media slot.
`media-slot`	The slot that renders custom media content for the video player.
`content`	The content slot used for text or custom content displayed below the media.

nbhd-video-player::part(base) {
  /* your styles */
}

CSS Properties

Set these on nbhd-video-player 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.

Property	Token	Value
`--nbhd-videoPlayer-content-marginBlock`	`--nbhd-space-6 --nbhd-space-0`	`24px 0px`
`--nbhd-videoPlayer-host-display`	—	`block`
`--nbhd-videoPlayer-marginInline`	`--nbhd-space-0`	`0px`
`--nbhd-videoPlayer-maxInlineSize`	—	`100%`
`--nbhd-videoPlayer-media-aspectRatio`	—	`16 / 9`
`--nbhd-videoPlayer-media-inlineSize`	—	`100%`
`--nbhd-videoPlayer-media-overflow`	—	`hidden`
`--nbhd-videoPlayer-media-position`	—	`relative`
`--nbhd-videoPlayer-paddingBlock`	`--nbhd-space-12`	`48px`

Dependencies

Child components <nbhd-video-player> renders internally. Import them too when you tree-shake.

VideoReady <nbhd-video> TextReady <nbhd-text>