← Jobs

Web Developer Needed: Fix Video Transparency / Alpha Channel Issue (WebM/VP9) on Luxury Website

Budget: $30.0 FIXED / ⭐ 0.00 (0) ITA

web-programming, web-design, html

Descrizione: We are managing a high-end luxury car rental website built with React and Tailwind CSS. We are experiencing a persistent technical issue regarding the rendering of brand logos as .webm VP9 video assets. The Problem: Our logos are exported with transparent backgrounds. However, when rendered within a video tag on the live site, they display with an opaque grey/black background, breaking the design aesthetic of our dark-themed black website. Current Status and Observations: Asset Verification: When opening the source .webm files directly in a browser (outside the application), they appear with a grey background (suggesting the browser is rendering the alpha channel as neutral grey). Failed Attempts: Forced CSS background transparent !important on video elements. Injection of global CSS overrides. Testing with various mix-blend-mode properties (screen, multiply). Removing all parent container background classes. Infrastructure: Assets are hosted on Cloudinary and served with f_webm,vc_vp9 transformations. The Objective: We need to achieve a seamless, fully transparent overlay where the logo renders clean on our black website background. We need a professional to: Diagnose if the issue lies in the Cloudinary encoding/transformation pipeline or in the browser's video compositor handling. Provide a solution that ensures true transparency. Recommend the best format (WebM vs. transparent HEVC MP4 for Safari/iOS compatibility) and the exact export/transformation settings required to ensure alpha channel preservation across all modern browsers. Required Skills: Deep expertise in HTML5 Video API and CSS Compositing. Experience with Cloudinary video transformations. Strong understanding of video alpha channel encoding (VP9/HEVC). Front-end performance optimization.
Openen op Upwork