Video Dialog

This section provides an overview of the `VideoDialog` component, including its usage and examples.

The VideoDialog component displays a thumbnail with a play button overlay. When clicked, it opens a modal dialog with an embedded video. It supports multiple entrance/exit animations and allows custom image rendering via the ImageComponent prop (e.g., next/image).

Use Cases

  • Highlighting a video in a section with a preview thumbnail
  • Using modal transitions to enhance the viewing experience
  • Leveraging image optimization tools like next/image

Image Requirements

  • Place your thumbnail image (e.g., hero-video-bg.svg) in the public/images folder of your project.
  • The recommended image size is 1920px width × 1080px height for best display quality.

Video Source Requirements

  • The videoSrc prop should be a YouTube embed URL or another remote video URL (e.g., Vimeo).
  • For YouTube, use the embed format:
    https://www.youtube.com/embed/VIDEO_ID
  • For other remote videos, provide the direct embed or stream URL.

Using a local video file:
If you want to use a local video file, place your video (e.g., my-video.mp4) in the public/videos folder of your project and use a relative path for videoSrc:

Example Usage

import { VideoDialog } from '@xata.io/components';
import Image from 'next/image';

<VideoDialog
  ImageComponent={Image}
  animationStyle="from-center"
  videoSrc="https://www.youtube.com/embed/qIW56gBLtJM?si=VdexeLdmGH_mG6mE"
  thumbnailSrc="/images/hero-video-bg.svg"
  videoTitle="pgroll demo video"
/>

The example usage produces: