Skip to main content

VideoPopup Component Guide

This component renders a customizable button that opens a popup modal containing an embedded or uploaded video. It supports YouTube links, direct video files, playback controls, speed settings, and accessibility features.

📦 Component Overview​

The component is composed of a single main component:

  • VideoPopup – Displays a button that opens a modal with a video player (YouTube iframe or native <video> element).

It provides interactive playback features such as play/pause, progress tracking, speed adjustment, and keyboard navigation.

🧩 Usage Example​

To use this component, import it into your page and provide the required props:

import VideoPopup from '@site/src/components/VideoPopup';

<VideoPopup
  buttonText="Watch Demo"
  videoUrl="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
  caption="Learn how Spark transforms your workflow"
  buttonVariant="primary"
/>