If you are using a div with flex, make sure to set the width to 100% for the aspect ratio to work.
You must use it with VideoHide component.
| Attribute | Description |
|---|---|
data-active | When the mouse stays for x seconds. |
data-playing | When the video is playing. |
import { Video, VideoHide } from "../main";
export default function Component() {
return (
<Video
src="https://4dy1hskjy7.ufs.sh/f/bTa5OaPXXZ6rXyXvdMAcqyLVgEBIzP6St18lu72QJabsMUxG"
aspectRatio={16 / 9}
controls
className="max-w-xl rounded-xl"
>
<VideoHide className="absolute top-0 right-0 left-0 bg-black/50 p-4 text-white transition data-[active=true]:-translate-y-full">
<h2 className="text-lg font-medium">Video</h2>
<p className="text-sm">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa
laudantium maxime.
</p>
</VideoHide>
</Video>
);
}| Props | Types |
|---|---|
controlsOption | nodownload |
--animate-video-options: video-options 0.2s ease-in-out;
--animate-video-options-speed: video-options-speed 0.2s ease-in-out;