Video

⌘

Displays video content

Overview

The video component is a responsive container that displays video content. Videos by default should be self-hosted (preferrably) or can alternatively be sourced from third-party sites. Videos autoplay by default and, for accessibility, can be paused on click anywhere on the video frame or optionally using the pause/play button.

Default

Note: The video container background can be styled differently using solid or gradient colors.

<div className="box px-6 py-16 my-6 flex justify-center items-center bg-gray-100 dark:bg-gray-900">
  <Video
    src="/video-test.mp4"
    title="Test video"
    btnColor="bg-gray-300"
    btnHoverColor="hover:shadow-gray-300"
    iconTextColor="var(--accent-9)"
    darkBtnColor="dark:bg-gray-600"
    darkBtnHoverColor="dark:shadow-gray-600"
    playbutton={false}
  />
</div>

Gradient

Note: If the pause/play button is enabled, it can be customized to contrast better with the container background.

<div className="box px-6 py-16 my-6 flex justify-center items-center bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
  <Video
    src="/video-test.mp4"
    title="Test video"
    btnColor="bg-white"
    btnHoverColor="hover:shadow-white"
    iconTextColor="var(--accent-9)"
    darkBtnColor="dark:bg-gray-900"
    darkBtnHoverColor="dark:shadow-gray-900"
    playbutton={true}
  />
</div>