Issue with WebM Video Transparency Rendering on iOS

I'm experiencing a persistent issue with transparent WebM videos rendered via WKWebView in an iOS Capacitor app. The videos play normal, however, they display a black background frame, which does not occur in the web version of the app. I've tried: Playing with the css setting, Enabling experimental WKWebView features, Adjusting meta tags for inline video playback and hardware acceleration.

That my code:

                        showThumbs={false}
                        showStatus={false}
                        showIndicators={true}
                        showArrows={false}
                        infiniteLoop={true}
                        autoPlay={true}
                        interval={5000} // Change slide every 5 seconds
                        onChange={(index) => {
                            if (playerRefs.current[index]) {
                                playerRefs.current[index]?.seekTo(0);
                                playerRefs.current[index]?.getInternalPlayer()?.play();
                            }
                        }}
                    >
                        {videos.map((video, index) => (
                            <div key={index} className="video-slide">
                                <ReactPlayer
                                    ref={(player) => (playerRefs.current[index] = player)}
                                    url={video.src}
                                    playing={isLoaded[index]} // Play only when video is loaded
                                    loop
                                    muted
                                    width="100%"
                                    onReady={() => handleVideoReady(index)} // Set loaded state when video is ready
                                    style={{ backgroundColor: 'transparent' }}
                                    config={{
                                        file: {
                                            attributes: {
                                                playsInline: true,
                                            },
                                        },
                                    }}
                                />
                                <p className="description">{video.description}</p>
                            </div>
                        ))}
                    </Carousel>

Working with React, capacitor.

The videos work perfect when I test it on the web app, the problem occurs just on my ios app

Answered by DTS Engineer in 813213022
Accepted Answer

I didnt see any reply in the link provided. Anyway the solution for me found on css-tricks: https://css-tricks.com/overlaying-video-with-transparency-while-wrangling-cross-browser-support/

Issue with WebM Video Transparency Rendering on iOS
 
 
Q