React-player for vimeo show the player to be small at first

Question

I have installed Reactplayer package in my Next.js application where i tried to load the vimeo video. but during the initial render the player seems to be small and then it expands like the one in the screenshot.

Initial

After render

Here is the below snippet where i have used React player to be responsive

Wrapper

<div className="relative w-[100%] mobile:w-[70%] pt-[56.25%] mobile:pt-[40%] bg-gold-label-pastel">
  <div>
    <ReactPlayer
      className="react-player"
      width="100%"
      height="100%"
      url="https://player.vimeo.com/video/786201103"
      controls={true}/>
   </div>
 </div>

CSS

.react-player {
  position: absolute;
  top: 0;
  left: 0;
}

Answer 1

Try removing the div that surrounds the actual player like this...

 <div className="relative w-[100%] mobile:w-[70%] pt-[56.25%] mobile:pt-[40%] bg-gold-label-pastel">
    <ReactPlayer
      className="react-player"
      width="100%"
      height="100%"
      url="https://player.vimeo.com/video/786201103"
      controls={true}
     />
 </div>

Answer 2

This seems to be a bug in the Vimeo API mentioned here: https://github.com/CookPete/react-player/issues/810#issuecomment-604110350

In my case, I was able to resolve the issue by removing width="100%" and height="100%" from <ReactPlayer/> parameters and applying following CSS:

.react-player {
  width: 100% !important;
  height: 100% !important;
}

.react-player iframe {
  width: 100%;
  height: 100%;
}