Videojs вместе с плагином Nuevo не может настроить панель управления для отображения только в полноэкранном режиме.

Question

Вот компонент React

      import React from "react";
import videojs from "video.js";
// import "video.js/dist/video-js.css";
 import "../nuevo/skins/shaka/videojs.css";
import "../nuevo/components/nuevo.js";

const VideoJSPlayer = (props) => {
  const videoRef = React.useRef(null);
  const playerRef = React.useRef(null);
  const {options, onReady} = props;

  React.useEffect(() => {
    const player = playerRef.current;

    if (player) {
      player.dispose();
      playerRef.current = null;
    }
    // Make sure Video.js player is only initialized once
    if (!playerRef.current) {
      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode. 
      const videoElement = document.createElement("video-js");

      videoElement.classList.add('vjs-big-play-centered');
      videoRef.current.appendChild(videoElement);

      const player = playerRef.current = videojs(videoElement, options, () => {
        videojs.log('player is ready');
        onReady && onReady(player);
      });

     player.nuevo(options.nuevoOptions);

    // You could update an existing player in the `else` block here
    // on prop change, for example:
    } else {
      const player = playerRef.current;
      player.autoplay(options.autoplay);
      player.src(options.sources);
      console.log("second");
      player.nuevo(options.nuevoOptions);
    }
  }, [onReady, options, videoRef]);

  // Dispose the Video.js player when the functional component unmounts
  React.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>
  );
}

export default VideoJSPlayer;

Вот файл, из которого я передаю параметры для проигрывателя

      import React from 'react';
 import VideoJSPlayer from '../components/VideoJSPlayer';
 import "../nuevo/skins/shaka/videojs.css";
 import "../nuevo/components/nuevo.js";

const VideoOptions = () => {
  const videoJsOptions = {
    autoplay: true,
    inactivityTimeout: 0,
    controls: false,  
    // controlBar: {
    //   children: [
    //     'fullscreenToggle',
    //   ]
    // },
    preload: 'auto',
    sources: [
      {
        src: '//vjs.zencdn.net/v/oceans.mp4',
        type: 'video/mp4',
      },
    ],
  
    nuevoOptions: {
      logo: "",
      logourl: "",
      zoomMenu: false,
      zoomInfo: false,
      settingsButton: false,
      buttonRewind: false,
      buttonForward: false,
      shareMenu: false,
      rateMenu: false,
      qualityMenu: false,
      pipButton: false,  
      controlbar: false,  
    }
  };
  return (
    <div>
      <div style={{ marginTop: "121px", marginRight: "150px", marginLeft: "150px" }}>
        <h1 style={{ color: "#D9D9D9" }}> Beautiful Ocean </h1>
        <VideoPlayer options={videoJsOptions} />
      </div>
      <div className="flex basis-1/3 items-center justify-center">
      </div>
    </div>
  );
}

export default VideoOptions;

Пара вопросов:

1. Я вижу ошибки, когда раскомментирую следующие строки в файле параметров при использовании плагина nuevo. Без плагина я смог отобразить только полноэкранный значок. Есть ли способ настроить при использовании плагина nuevo?

      // controlBar: {
    //   children: [
    //     'fullscreenToggle',
    //   ]
    // },

2. Как вывести панель управления ниже экрана видео? Я пробовал css со следующими стилями для vjs-control-bar, но это не работает с плагином nuevo со скином shaka. И портит отзывчивость с этим стилем. Есть ли лучший способ стилизовать?

      .video-js .vjs-control-bar {
  flex-wrap: wrap;
  justify-content: space-between;
  top: 400px;
  position: relative;
  background-color: #333333 !important;
}