Unable to display vimeo video fullscreen using react-player on mobile phones (see attached image for best I can manage)

Question

Using react-player, I want a full screen video on mobile. I've tried using 'playinline' on and off, 'background', 'responsive', 'padding-top' 57% etc, but I always end up with gaps at the top and/or bottom (as you can see in the image above - the white areas). Is it possible to make the video full screen using react-player with videos from vimeo (or using some other library/method/maybe a video tag)? Here is my code at present, although its not much use -

<ReactPlayer
            url={`https://vimeo.com/587270643`}
            playing={true}
            muted
            loop={true}>
</ReactPlayer>

and css (although ive tried all sorts of css, including making it fixed, using padding-top : 56.25% as per react-player docs

iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
    height: 100%;
      
}

cheers david