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.

[Aghasy8888]

Please add this to your css css file and import it in your component and you will be able to adjust the height and width of video js player as required.

.vjs-fluid:not(.vjs-audio-only-mode),
.video-js.vjs-9-16:not(.vjs-audio-only-mode),
.vjs_video_671-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
padding: 0 !important;
}

.vjs-9-16 {
width: 507px !important; /* Adjust as needed /
height: 321px !important; / Adjust as needed */
}

It worked for me, let me know if that helped you?