Video Bento
Video-enabled bento testimonial grid with modal playback.
Main Features of Video Bento
How to Use Video Bento in Next.js
Installation Guide for Video Bento
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image, video. |
backgroundColor | string | #0a0a0a | Background color of the component (hex, rgb, or hsl). |
title | string | Video Testimonials | Main title text. |
titleColor | string | #ffffff | Color of the title text (hex, rgb, or hsl). |
cardBgColor | string | #171717 | Background color of the testimonial cards (hex, rgb, or hsl). |
cardBorderColor | string | rgba(255,255,255,0.1) | Border color of the testimonial cards (hex, rgb, or hsl). |
imageOverlayColor | string | rgba(0,0,0,0.4) | Overlay color for images (hex, rgb, or hsl). |
imageHoverOverlayColor | string | rgba(0,0,0,0.2) | Overlay color for images on hover (hex, rgb, or hsl). |
playButtonBgColor | string | rgba(255,255,255,0.2) | Background color of play buttons (hex, rgb, or hsl). |
playButtonBorderColor | string | rgba(255,255,255,0.3) | Border color of play buttons (hex, rgb, or hsl). |
playButtonIconColor | string | #ffffff | Icon color of play buttons (hex, rgb, or hsl). |
playButtonSize | number | 32 | Size of play buttons in pixels. |
authorNameColor | string | #ffffff | Color of the author name text (hex, rgb, or hsl). |
authorRoleColor | string | rgba(255,255,255,0.7) | Color of the author role text (hex, rgb, or hsl). |
gradientFromColor | string | rgba(0,0,0,0.8) | Start color of the gradient overlay (hex, rgb, or hsl). |
gradientToColor | string | transparent | End color of the gradient overlay (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for video-first brands, course creators, and Next.js platforms that want to prioritize authenticity. Use this React component for a video-enabled bento grid where testimonials can be played directly in a modal overlay.
Best Practices
Follow React best practices by using high-quality thumbnail images for the video tiles. Maintain consistent spacing within your design system by aligning the grid tiles. Optimize for performance by lazy-loading the video players only when the modal is opened.
Why This Component Matters in Modern UI Development
Video testimonials are the highest form of social proof as they convey tone and emotion that text cannot. This production-ready UI component helpsคุณ build an interface that feels human and trustworthy, significantly increasing conversion potential.
Frequently Asked Questions
QHow do the videos play?
When a user clicks a tile, it opens a focused modal with an embedded video player for a distraction-free experience.
QCan I use YouTube links?
The component is built to handle various video sources, but it's best paired with high-quality MP4s or hosted video links in the `media` property.
QIs the bento grid responsive?
Yes, the mosaic layout automatically collapses into a single-column list on mobile to ensure the play buttons remain easily tappable.