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"
    theme="light">
    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"
        theme="light">
        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 object Content for component.
prefab prefab boolean false When enabled the component will use the data property for content and not the slots.
compact compact boolean false Set the component max-inline-size to --nbhd-maxInlineSize.
controls controls boolean false Enabled will display the player controls. When not enabled the video player will autoplay video.
sd sd boolean false Enabled will display the video player in standard definition (SD) aspect ratio 4:3.
theme theme primary-light | secondary-light | primary-dark | secondary-dark primary-light Background theme color for main component.
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 Properties

Data object property is only when the prefab property is enabled.

Property Type Description
media Required object Media data object.
content string General content block.

Slots

Slots are not available when the prefab property is enabled.

Name Description
content Content placement.
video Video placement.

CSS Parts

Name Description
base The main wrapper element.
base-container The main container element.
visual The visual container.
video The video element.
content The content element.

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.