This is documentation for Neighborhood v1 and may be outdated. Please visit the latest Neighborhood Design System documentation for latest features.

Video Player
ready

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

Open in new window
Viewport: 
<section class="nbhd-video-player  nbhd-background-theme-secondary-light ">
  <div class="nbhd-container nbhd-video-player__container">
    <div class="nbhd-video-player__visual">
      <video class="nbhd-video nbhd-fluid nbhd-video-player__video" autoplay playsinline loop muted poster="https://moen.widen.net/content/xevbnr2frf/web/CES-SneakPeek2023-JumbotronV3.jpg" aria-label="Condimentum Aenean Nibh - video">
        <source src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4" type="video/mp4">
      </video>
    </div>
    <div class="nbhd-content nbhd-video-player__content">
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    </div>
  </div>
</section>

Variants

Video Player has options to add controls and change the aspect ratio for how the video is displayed in the player.

Player Controls

When player controls are enabled the Video Player will not autoplay and not be looped. Shown with Primary Light component background.

Open in new window
Viewport: 
<section class="nbhd-video-player  nbhd-background-theme-primary-light ">
  <div class="nbhd-container nbhd-video-player__container">
    <div class="nbhd-video-player__visual">
      <video class="nbhd-video nbhd-fluid nbhd-video-player__video" muted poster="https://moen.widen.net/content/a7np3cuxrq/ex75c_host_sizzle_extended.jpg" controls aria-label="Ipsum Fringilla Vehicula - video">
        <source src="https://moen.widen.net/stream/hd/moen/a7np3cuxrq/ex75c_host_sizzle_extended.mp4" type="video/mp4">
      </video>
    </div>
    <div class="nbhd-content nbhd-video-player__content">
      <p>Donec id elit non mi porta gravida at eget metus.</p>
    </div>
  </div>
</section>

SD Video

With Standard Definition aspect ratio selected. Shown with Secondary Dark component background.

Open in new window
Viewport: 
<section class="nbhd-video-player nbhd-video-player--sd  nbhd-background-theme-secondary-dark ">
  <div class="nbhd-container nbhd-video-player__container">
    <div class="nbhd-video-player__visual">
      <video class="nbhd-video nbhd-fluid nbhd-video-player__video" muted poster="https://moen.widen.net/content/g0qximw21k/originalMoen-SWN-2023_1080p.jpg" controls aria-label="Ipsum Fringilla Vehicula - video">
        <source src="https://moen.widen.net/stream/hd/moen/g0qximw21k/Moen-SWN-2023_1080p.mp4" type="video/mp4">
      </video>
    </div>
    <div class="nbhd-content nbhd-video-player__content">
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>
</section>

Component Properties

Name Type Default Description
componentID string ID attribute value for component.
cssClass string Additional CSS class(es) to add to component.
componentCompact boolean false Enable compact styling.
componentMarginTop none | small | medium | large none Add additional margin above the component. Small = 24px, Medium = 48px, Large = 96px.
componentMarginBottom none | small | medium | large none Add additional margin below the component. Small = 24px, Medium = 48px, Large = 96px.
componentPaddingTop default | none | small | medium | large default Set the padding for the top of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the top padding styling for the component and use the default setting.
componentPaddingBottom default | none | small | medium | large default Set the padding for the bottom of the component. None = 0px, Small = 24px, Medium = 48px, Large = 96px. Default will not override the bottom padding styling for the component and use the default setting.
componentBackground primary-light | primary-dark | secondary-light | secondary-dark primary-light Background theme color for component.
mediaSource object Video from widen
mediaAltText string Alternative Text for media.
content string Content block to provide additional context of video media.
mediaControls boolean false Enabled will display the player controls. When not enabled the video player will autoplay video.
mediaSD boolean false Enabled will display the video player in standard definition aspect ratio 4:3.

Elements

This component contains the following elements and their associated CSS Properties.

Integration Status

CSS Sap Commerce React
ready
ready
unavailable