How to change the height and width of video js player in react js

[opticSquid]

I'm using video-js to play mpeg-dash streams in react. I have made this component for my use:

    "use client";
    import { VideoPlayerProps } from "@/lib/types/video-player-interface";
    import React, { useEffect } from "react";
    import videojs from "video.js";
    import Player from "video.js/dist/types/player";
    import "video.js/dist/video-js.css";
    export function VideoPlayer(videoPlayerProps: VideoPlayerProps) {
      const videoRef = React.useRef<HTMLDivElement>(null);
      const playerRef = React.useRef<Player | null>(null);
      // extract filename without extension
      const extractedFilename = videoPlayerProps.filename.replace(/\.[^.]+$/, "");
      const playerOptions = {
        autoplay: videoPlayerProps.autoPlay,
        preload: "auto",
        enableSmoothSeeking: true,
        experimentalSvgIcons: true,
        nativeControlsForTouch: true,
        noUITitleAttributes: true,
        loop: true,
        controls: true,
        fluid: true,
        responsive: true,
        sources: [
          {
            src: `${process.env.NEXT_PUBLIC_MEDIA_SERVER_URL}/${extractedFilename}/${extractedFilename}.mpd`,
            type: "application/dash+xml",
          },
        ],
        userActions: {
          click: true,
        },
      };
      useEffect(() => {
        if (!playerRef.current && videoRef.current) {
          const videoElement = document.createElement("video-js");
          videoElement.classList.add("vjs-9-16");
          videoRef.current.appendChild(videoElement);
          playerRef.current = videojs(videoElement, playerOptions);
        }
      }, []);

      useEffect(() => {
        const player = playerRef.current;
        return () => {
          if (player && !player.isDisposed()) {
            player.dispose();
            playerRef.current = null;
          }
        };
      }, [playerRef]);
      return (
        <div data-vjs-player>
          <div ref={videoRef} />
        </div>
      );
    }

I'm trying to change the height of the video player but I'm unable to do so. I tried using the tailwind classes like h-4/5 etc but they are not taking any effect. But then I found this document in video-js site. Stating:

In some cases, particularly with web applications using frameworks that may manage the element (e.g. React, Ember, Angular, etc), these <style> elements are not desirable. They can be suppressed by setting window.VIDEOJS_NO_DYNAMIC_STYLE = true before including Video.js.
This disables all CSS-based player sizing. Players will have no height or width by default! Even dimensional attributes, such as width="600" height="300" will be ignored. When using this global, you will need to set their own dimensions in a way that makes sense for their website or web app.

I'm not sure how to set this property properly and change the height. Please help me with this.