The play button currently uses a default gray color. However, popular platforms like YouTube, Twitch, and Dailymotion use their brand colors for this button, enhancing visual appeal and aligning with their branding.

Solution:

To address this, I suggest exposing a new prop that allows users to customize the play button’s color. You can find the relevant code in the hero-video-dialog.tsx file, located in your components folder after installing the Hero Video Dialog.

Installation Steps:

1. First, install the Hero Video Dialog using MagicUI CLI:

   npx magicui-cli add hero-video-dialog

2. After installation, navigate to your components folder and locate the hero-video-dialog.tsx file. Inside this file, you'll find the following className for the play button:

    <div className={`flex items-center justify-center bg-gradient-to-b from-primary/30 to-primary shadow-md rounded-full size-20 transition-all ease-out duration-200 relative group-hover:scale-[1.2] scale-100`}>
     </div>

To customize the play button’s color, you can modify the from-primary/30 and to-primary gradient classes with your desired colors.

Do you explicitly need a prop for this colour customization, otherwise solution of @sanjay-mali can easily work.

Let me know. Thank you.

@itsarghyadas can i make PR for it. pass start and end color using props.

please go ahead and also think about what will be the best way - explicit props or somehow I can pass to the tailwind merge.

Thank you.

Any update?

Hi @itsarghyadas

I hope you're doing well. It's been [16 days] since I raised the pull request regarding #317 , and I haven't received any feedback yet. If there's no interest in reviewing or merging the PR, please let me know. I can close it and focus on contributing to other repositories.
Thanks for your time, and I appreciate your response.