Video
draft
Video element component.
Loading
Code
HTML
import { NbhdVideo } from '@fbin-web/neighborhood-core';<nbhd-video
src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4">
</nbhd-video>React
import { NbhdVideo } from '@fbin-web/neighborhood-react';
const App = () => (
<>
<NbhdVideo src="https://moen.widen.net/stream/hd/moen/xevbnr2frf/CES-SneakPeek2023-JumbotronV3.mp4"></NbhdVideo>
</>
);Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
src
Required
|
src
|
string
|
Video source. | |
poster
|
poster
|
string
|
Poster placeholder for video. | |
alt
|
alt
|
string
|
Alternative text for video. | |
cssClass
|
css-class
|
string
|
Additional CSS class(es) to apply to component. | |
loop
|
loop
|
boolean
|
false
|
Loop the video after video completes. |
autoplay
|
autoplay
|
boolean
|
false
|
Autoplay and playinline the video. When enabled there will be a pause/play button overlay. |
controls
|
controls
|
boolean
|
false
|
Display controls on video. When enabled this will disable autoplay functionality. |
CSS Parts
| Name | Description |
|---|---|
| base | The component's base wrapper. |
CSS Properties
| Property | Default Value |
|---|---|
--nbhd-video-blockSize
|
var(--nbhd-visual-blockSize, auto) |
--nbhd-video-display
|
var(--nbhd-visual-display, block) |
--nbhd-video-inlineSize
|
var(--nbhd-visual-inlineSize, 100%) |
--nbhd-video-insetBlockEnd
|
var(--nbhd-visual-insetBlockEnd, auto) |
--nbhd-video-insetBlockStart
|
var(--nbhd-visual-insetBlockStart, auto) |
--nbhd-video-insetInlineEnd
|
var(--nbhd-visual-insetInlineEnd, auto) |
--nbhd-video-insetInlineStart
|
var(--nbhd-visual-insetInlineStart, auto) |
--nbhd-video-maxBlockSize
|
var(--nbhd-visual-maxBlockSize, none) |
--nbhd-video-maxInlineSize
|
var(--nbhd-visual-maxInlineSize, 100%) |
--nbhd-video-minBlockSize
|
var(--nbhd-visual-minBlockSize, auto) |
--nbhd-video-minInlineSize
|
var(--nbhd-visual-minInlineSize, auto) |
--nbhd-video-objectFit
|
var(--nbhd-visual-objectFit, fill) |
--nbhd-video-position
|
var(--nbhd-visual-position, static) |
--nbhd-video-transform
|
var(--nbhd-visual-transform, none) |
--nbhd-video-transitionDelay
|
var(--nbhd-visual-transitionDelay, 0s) |
--nbhd-video-transitionDuration
|
var(--nbhd-visual-transitionDuration, 0s) |
--nbhd-video-transitionProperty
|
var(--nbhd-visual-transitionProperty, all) |
--nbhd-video-transitionTimingFunction
|
var(--nbhd-visual-transitionTimingFunction, ease) |