Thanks for being a part of WWDC25!

How did we do? We’d love to know your thoughts on this year’s conference. Take the survey here

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