Question:

I’m using the video.js library in my React project to display videos, and I want to customize the position of the share button to be displayed in the top right corner of the video player instead of on the control bar. How can I achieve this?

Code Snippet:

import { useEffect, useRef } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import './video-js.css';

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

    useEffect(() => {
        if (!playerRef.current) {
            const videoElement = document.createElement('video-js');
            videoElement.classList.add('vjs-big-play-centered');
            videoElement.classList.add('vjs-altRadar');
            videoRef.current.appendChild(videoElement);

            const player = playerRef.current = videojs(videoElement,
                {
                    ...options,
                    controlBar: {
                        children: [
                            'playToggle', // Play/Pause button
                            'nextButton', // Custom button
                            'volumePanel',
                            'currentTimeDisplay',
                            'timeDivider',
                            'durationDisplay',
                            'progressControl',
                            'pictureInPictureToggle',
                            'fullscreenToggle',
                            'shareButton',
                        ]
                    }
                }, () => {
                    // videojs.log('player is ready');
                    onReady && onReady(player);

                    // Create a custom button
                    const Button = videojs.getComponent('Button');

                    const nextButton = new Button(player, {
                        text: 'next button'
                    });

                    nextButton.addClass('vjs-next-button');
                    nextButton.controlText('Custom Button');
                    nextButton.on('click', () => {
                        alert('Next button clicked!');
                    });

                    // Add the custom button to the control bar at the second index
                    const controlBar = player.getChild('controlBar');
                    controlBar.addChild(nextButton, {}, 1); // Position at the second index

                    // share button
                    const shareButton = new Button(player, {
                        text: 'share button'
                    });

                    shareButton.addClass('vjs-share-button');
                    shareButton.controlText('share Button');
                    shareButton.on('click', () => {
                        alert('Share button clicked!');
                    });

                    // Add the custom button to the video player
                    const videoPlayer = player.el();
                    videoPlayer.appendChild(shareButton.el());
                    shareButton.addClass('vjs-share-button-top-right');
                });
        } else {
            const player = playerRef.current;
            player.addClass('vjs-altRadar');
            player.autoplay(options.autoplay);
            player.src(options.sources);
        }
    }, [options, onReady]);

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

        return () => {
            if (player && !player.isDisposed()) {
                player.dispose();
                playerRef.current = null;
            }
        };
    }, []);

    return (
        <div data-vjs-player>
            <div ref={videoRef} />
        </div>
    );
}

export default VideoJs;

Details:

I’ve tried adding the share button to the control bar options, but it’s still displayed within the control bar.
I want the share button to be positioned on the top right corner of the video player, outside the control bar.
The current implementation adds the share button to the control bar, but I need it to be separate from the control bar.
Desired Outcome:

I want the share button to be displayed on the top right corner of the video player, independent of the control bar. How can I achieve this positioning?