Video

The Video component is a custom wrapper around the ReactPlayer component, providing additional flexibility and customization options. It can be used to render videos from various sources (e.g., Vimeo, YouTube), with features such as custom placeholders, autoplay, video control displays, etc.

Importing

import { Video } from '@ef-global/backpack/Video';

Props

Name	Type	Default	Description
autoplay	boolean	false	Set to true to automatically start video playback
placeholderImageSrc	string		URL of a custom placeholder image, shown before video load
radius	BorderRadiusValues	'xs'	Radius of the video player's corners
variant	BoxVariantValues		Defines the variant of the box, affecting the box-shadow and background color
playing	boolean	false	Set to true to start playing on load
muted	boolean	false	Mutes the player on load
light	boolean or string	true	Show thumbnail before loading the player, or you can pass a custom image URL string
playIcon	ReactNode		Custom play icon to show when video is paused
aspectRatio	string	'16/9'	Aspect ratio of the video player
alt	string		Alternative text to be displayed if the video cannot be rendered
enableCc	boolean	false	Enable captions/subtitles, if available
className	string		Additional CSS classes to apply to the component
url	string		The url of a video or song to play
controls	boolean	false	Set to true or false to show or hide the player controls
loop	boolean	false	Set to true or false to loop the video once ended
playsinline	boolean	false	Set to true to allow the video to be played inline on iOS

Usage

Here are a few examples of the Video component usage:

Default

<Video
    url='https://vimeo.com/357511081'
    playing={true}
/>

With YouTube Video

<Video
    url='https://www.youtube.com/watch?v=mhN3E_hlWmU'
    controls={false}
    playing={false}
    light={false}
/>

With Controls

<Video
    url='https://vimeo.com/357511081'
    controls={true}
    playing={false}
    light={false}
/>

With Autoplay

<Video
    url='https://vimeo.com/357511081'
    autoplay={true}
    playsinline={true}
/>

With Loop

<Video
    url='https://vimeo.com/357511081'
    controls={true}
    loop={true}
/>

With Placeholder Image

<Video
    url='https://vimeo.com/357511081'
    controls={false}
    playing={true}
    light={true}
/>

With Custom Placeholder Image

<Video
    url='https://vimeo.com/357511081'
    controls={false}
    playing={true}
    light={true}
    placeholderImageSrc='https://a.storyblok.com/f/171771/4656x3492/bbf48d4721/wojciech-then-dija5f0vogq-unsplash.jpg'
/>

Toast ContentCard