Video as background not working in Safari
Unanswered
Least Tern posted this in #help-forum
Least TernOP
Hello I have a problem displayin videos as bg on apple devices. I’ve tried changing videos format and putting autoplay muted and everything else I found on stackoverflow but still no luck. This is my code
<div id="video-frame" className='relative z-10 h-dvh w-screen overflow-hidden'>
<video
ref={videoRef}
src={getVideoSrc(upcomingVideoIndex)}
onTimeUpdate={handleTimeUpdate}
onLoadedData={handleVideoLoad}
className="absolute inset-0 scale-150 h-full w-full object-center object-cover"
autoPlay
muted
typeof='video/mp4'
playsInline
disablePictureInPicture
onEnded={handleSwitchVideo}
/>
<div className='left-0 right-0 z-10 absolute bottom-0 bg-gradient-to-t h-[50%] from-[#090909] to-[#090909]/0' />
</div>
<div id="video-frame" className='relative z-10 h-dvh w-screen overflow-hidden'>
<video
ref={videoRef}
src={getVideoSrc(upcomingVideoIndex)}
onTimeUpdate={handleTimeUpdate}
onLoadedData={handleVideoLoad}
className="absolute inset-0 scale-150 h-full w-full object-center object-cover"
autoPlay
muted
typeof='video/mp4'
playsInline
disablePictureInPicture
onEnded={handleSwitchVideo}
/>
<div className='left-0 right-0 z-10 absolute bottom-0 bg-gradient-to-t h-[50%] from-[#090909] to-[#090909]/0' />
</div>