Video

Usage

import {Video} from '@/ui'

<div className='video-wrapper'>           
	<Video
		src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
		formats={['mp4', 'webm']}
		poster='http://media.w3.org/2010/05/bunny/poster.png'
	/>
</div>

Output

Props

src: string
className?: string | undefined
formats?: any[] | undefined
loop?: boolean | undefined
controls?: boolean | undefined
preload?: 'auto' | 'metadata' | 'none' | undefined
poster?: string | undefined
fallback?: string | undefined

CSS

.video-wrapper {
    @apply relative w-full h-auto max-w-4xl bg-dark aspect-video;
}

.video {
    @apply w-full aspect-video bg-dark;

    &[poster] {
        @apply object-cover;
    }
}