Image placeholder for video loading in NextJS 14

Question

I have next js 14 project. I have three videos for slider. I used swiper js. On one first slide, video sometime take times to load, it shows red background image.

I am trying to put image placeholder before video loading, but image placeholder is showing but video is not. How can i solve it?

  <SwiperSlide>
                
                <div className="relative w-full h-full">
                    <Image src='/placeholder-image.png' 
                    fill
                    alt='placeholder image'/>
                    
                    {/* Video element */}
                    <video
                        id="background-video"
                        preload="auto"
                        
                        autoPlay
                        loop
                        muted
                        playsInline
                        className="w-full h-full object-cover rounded-lg"
                    >
                        <source src="/SlideNew_1.webm" type="video/webm" />
                        Your browser does not support the video tag.
                    </video>
                </div></SwiperSlide>

Answer 1

What you can do is to use poster attribute for the <video/> tag.

<SwiperSlide>  
  <div className="relative w-full h-full">
     <video
       poster="/placeholder-image.png"
       id="background-video"
       preload="auto"
       autoPlay
       loop
       muted
       playsInline
       className="w-full h-full object-cover rounded-lg"
     >
       <source src="/SlideNew_1.webm" type="video/webm" />
       Your browser does not support the video tag.
     </video>
   </div>
</SwiperSlide>