Video

The Video component displays an embedded YouTube video within a bordered, styled container. It is primarily used for showcasing a demo or promotional video, providing users with a visual overview of the application.

Props

Prop	Type	Description
videoSource	string	The unique YouTube video ID to be embedded in the component.

Dependencies

• React Icons: Uses TbArrowWaveRightDown to visually point towards the video, adding an engaging graphical element.

Key Style Classes

• Container Styles:

  • w-[1250px] h-fit flex flex-col items-center: Centers the video within a constrained container width with flexible height.

  • px-4: Adds padding to ensure the video and title align properly within the layout.

• Video Frame Styles:

  • border border-emerald-500 rounded-xl: Provides a bordered frame with rounded corners, enhancing the presentation of the video.

  • w-full h-[210px] md:h-[670px]: Sets the frame to be full-width, with responsive height adjustments for mobile and larger screens.

• Arrow Icon:

  • rotate-45 text-emerald-500: Rotates the arrow icon to point downward-right, guiding the user’s attention towards the video.

Usage Example

// Example usage of Video component with a specific YouTube video ID
<Video videoSource="ZY_Dh-c7MIU" />

Additional Notes

• Video Embedding: The videoSource prop should be a valid YouTube video ID, which is dynamically inserted into the iframe URL.

• Accessibility: The iframe lacks title and other accessibility features; consider adding attributes such as title="Demo video" for improved accessibility.

• Responsive Design: The component’s responsive height (h-[210px] on mobile, h-[670px] on larger screens) ensures optimal viewing across different devices.

---

This documentation covers the Video component’s main features and usage.