VideoJS div in React being difficult to center

I am trying to set centered a videoJS for HLS video streaming in React using display: flex in the parent div, but it makes the <div data-vjs-player> not visible (even though the audio still works). So far, and after lots of searches here and other forums + asking chatGPT, I have been able to establish the width and height of the video, but not able to fully center it in the visualizer_root. Here is the code of the components and the CSS:

Component that receives the ID of the video for the HLS streaming and establishes some options:

import React from 'react';
// This imports the functional component from the previous sample.
import Visualizer from "../../Visualizer/VisualizerMain";
import './MoviesComponentsStyles.css'
import videojs from "video.js";

export default function MoviesComponentsMain(props){

    const id = props.id

    const playerRef = React.useRef(null);

    const videoJsOptions = {
        autoplay: true,
        muted: true,
        controls: true,
        responsive: true,
        fluid: true,
        sources: [{
            src: 'http://localhost:8000/api/movie_stream/'+id+'/'+id+'.m3u8',
            type: 'application/x-mpegURL'
        }]
    };

    const handlePlayerReady = (player) => {
        playerRef.current = player;

        // You can handle player events here, for example:
        player.on('waiting', () => {
            videojs.log('player is waiting');
        });

        player.on('dispose', () => {
            videojs.log('player will dispose');
        });
    };

    return (
        <div id={'visualizer_root'}>
            <div id={'visualizer_movie_header'}>

            </div>
            <div id={'visualizer_movie_video'}>
                <Visualizer options={videoJsOptions} onReady={handlePlayerReady}/>
            </div>
            <div>Rest of app here</div>
        </div>
    );
}


Its corresponding CSS:

#visualizer_root{
    width: 1000px;
    height: 1000px;
    max-width: 100vh;
}

#visualizer_movie_video{

}

Child component where the final video is rendered:

import React from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default function Visualizer(props){

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

    React.useEffect(() => {

        // 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-fill');
            videoRef.current.appendChild(videoElement);

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

            // 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);
        }
    }, [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>
    );
}

Is there anything I can be missing out? Right now I am not fully sure and I would appreciate your help.

Thanks

You need to sign in to view this answers

Related Post