Reactjs – Make react player fit entire container

I have a video player component that uses react-player library with a container div around it to determine its size. When the video displays, there is a small margin on the left and right side of it between the edges of its container. Does anyone know how I can get rid of these margins?

Here is what the video looks like in the app

Here is the react

  const playerComponent = (
<div className="h-64 sm:h-96 bg-blue-300 flex justify-center rounded-lg overflow-hidden">
  <ReactPlayer
    height="100%"
    width="100%"
    playing={true}
    controls
    url={currentMediaURL}
  />
</div>

);