Shopify Product Video Background Color Issue

[FilipStan]

Hello!
I'm experiencing an issue with my product videos on my Shopify store. In my development environment, the video backgrounds are displaying correctly with a light gray background (#F6F6F6), but when the same videos are uploaded to Shopify and displayed on the main product page, the background changes to white.

What I've tried:

• Adding inline styles to the video container
• Checking theme settings for background color overrides
• Inspecting the rendered HTML to find conflicting styles

Technical details:

• Using a Next.js frontend with Tailwind CSS
• Videos are MP4 format with the correct background in the source files
• The issue occurs consistently across all product videos

Has anyone else encountered this issue with video backgrounds changing in Shopify? Any suggestions on how to maintain my original background color (#F6F6F6) when the videos are displayed in the Shopify environment?

Thanks in advance for your help!

[Small_Task_Help]

Hi,

Hope this will help

- Wrap Video in a Parent Box

Code example:

<div className="bg-[#F6F6F6] p-2">
  <video
    className="w-full h-auto"
    controls
    src="/path-to-video.mp4"
  />
</div>

- Use inline CSS for style
- Check for Theme Conflicts
- Use Video Non-Transparent
- Apply a Tailwind Safelist Rule
- Check video element styles using browser dev tools