Video Player
ready

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

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdVideoPlayer } from '@fbin-web/neighborhood-core';
<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>

React 

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
data Deprecated VideoPlayerData Data object containing media and content for the video player component.
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).
background background none | primary-light | secondary-light | primary-dark | secondary-dark none Background theme for the component container.
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 Structure (VideoPlayerData)

Structure of the data object passed to the video player component. This is deprecated; the preferred method is using slots.

Property Type Required Description
media Media Yes Media object containing video source, alt text, type, and styling information.
content string No Optional text content to display below the video player.

Media Structure

Structure of the Media object used in VideoPlayerData

Property Type Required Description
src string Yes Video source URL. Supports Widen URLs which are automatically formatted.
alt string Yes Alternative text describing the video content for accessibility.
type image | video Yes Media type identifier. Should be 'video' for video player usage.
class string No Optional CSS class name to apply to the video element.

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.
base-container The nbhd-container element that provides layout structure within the component.
visual The visual container
that wraps the media/video slot area.
video The media slot area where video content is displayed (falls back to data.media when slot is empty).
content The content slot area below the video for additional text or custom content (falls back to data.content when slot is empty).

CSS Properties

Property Default Value
--nbhd-videoPlayer-marginInline var(--nbhd-space-0, 0)
--nbhd-videoPlayer-maxInlineSize 100%
--nbhd-videoPlayer-paddingBlock var(--nbhd-space-12, 48px)
--nbhd-videoPlayer-visual-aspectRatio 16 / 9

Dependencies

This component contains the following components as dependencies.