Как изменить высоту и ширину видеоплеера js в реакции js ⇐ CSS

[Anonymous]

Я использую video-js для воспроизведения потоков mpeg-dash в реакции. Я создал этот компонент для себя:

Код: Выделить всё

"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(null);
const playerRef = React.useRef(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 (



);
}

Я пытаюсь изменить высоту видеоплеера, но... Я не могу этого сделать. Я пробовал использовать классы попутного ветра, такие как h-4/5 и т. д., но они не дали никакого эффекта. Но потом я нашел этот документ на сайте video-js. Заявление:

В некоторых случаях, особенно в веб-приложениях, использующих платформы, которые могут управлять элементом (например, React, Ember, Angular и т. д.), эти элементы не являются желательно. Их можно подавить, установив window.VIDEOJS_NO_DYNAMIC_STYLE = true перед включением Video.js.
Это отключает все размеры проигрывателя на основе CSS. По умолчанию у игроков не будет высоты и ширины! Даже атрибуты размеров, такие как ширина="600" высота="300" будут игнорироваться. При использовании этого глобального вам нужно будет установить их собственные размеры таким образом, чтобы это имело смысл для их веб-сайта или веб-приложения.

Я не уверен как правильно установить это свойство и изменить высоту. Пожалуйста, помогите мне с этим.

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-react-js