Video Player
ready

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

Example

icon-storybook-default View 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
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 none | primary | secondary | inverse | inverse-secondary primary Sets the surface theme applied to 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

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.

Dependencies

This component contains the following components as dependencies.