Player goes over 100% of page

[anKordii]

Hi,

I want to get player on whole page but when I do that with for example ratios from bootstrap, player goes over 100% of page and scroll bar appear.

I'm not the best at css and I can't find solution to it.

Framework: Nextjs

Code

.ratio-16x9 {
    --bs-aspect-ratio: calc(9 / 16 * 100%);
}
.ratio {
    position: relative;
    width: 100%;
}

<div className="ratio ratio-16x9">
      <Player playsinline onVmPlaybackReady={onPlaybackReady}>
        <Video poster={poster}>
          <source
            data-src={video}
            type="video/mp4"
          />
        </Video>

        <DefaultUi>

        </DefaultUi>
      </Player>
</div>

Screenshot

That green thing is the scroll bar