How can I create a custom button that attach with Video.JS in this React custom hook?

Question

I have a React custom hook that takes in URL , options , autoplay props, everything is working fine.

But I created a totally fullscreen video with it (I want it to be like that). So that's why I need to have a custom button.

At the very top of the left, you can see, I have already tried to create 2 buttons, but the problem is it bugged behind the Video.JS and won't fade together with the Video.JS and will stay like that forever, which I don't want, and I think I haven't implemented it to Video.JS properly.

I just wrapped it inside the Video.JS custom hook. Is there anyways I can make it work?

Here's what I'm trying to do in the custom Hook.

import React, { useEffect, useRef, useState } from "react"
import PropTypes from "prop-types"
import videojs from "video.js"
import "video.js/dist/video-js.min.css"
import "./videojs.css"
import videoJsContribQualityLevels from "videojs-contrib-quality-levels"
import videojsHlsQualitySelector from "videojs-hls-quality-selector"
videojs.registerPlugin("qualityLevel", videoJsContribQualityLevels)
videojs.registerPlugin("hlsQualitySelector", videojsHlsQualitySelector)

// eslint-disable-next-line import/prefer-default-export

const usePlayer = ({ src, controls, autoplay }) => {
    const options = {
        fill: true,
        fluid: true,
        preload: "auto",
        html5: {
            hls: {
                enableLowInitialPlaylist: true,
                smoothQualityChange: true,
                overrideNative: true,
            },
        },
        plugins: {
            qualityLevel: {},
            hlsQualitySelector: { displayCurrentQuality: true },
        },
    }
    const videoRef = useRef(null)
    const [player, setPlayer] = useState(null)

    useEffect(() => {
        const vjsPlayer = videojs(videoRef.current, {
            ...options,
            controls,
            autoplay,
            sources: [src],
        })
        setPlayer(vjsPlayer)

        return () => {
            if (player !== null) {
                player.dispose()
            }
        }
    }, [])
    useEffect(() => {
        if (player !== null) {
            player.src({ src })
        }
    }, [src])

    return videoRef
}

const VideoPlayer = ({ src, controls, autoplay }) => {
    const playerRef = usePlayer({ src, controls, autoplay })

    return (
        <>
            <div data-vjs-player>
            {/* I create a top-wrapper and put it inside here.
                But clearly it's not working as I intended */}
                <div className="top-wrapper">
                    <div className="top-left">
                        <button className="go-back-btn">Go back</button>
                    </div>
                    <div className="top-right">
                        <button className="go-next-btn">Go next</button>
                    </div>
                </div>
                <video ref={playerRef} className="video-js" />
            </div>
        </>
    )
}

VideoPlayer.propTypes = {
    src: PropTypes.string.isRequired,
    controls: PropTypes.bool,
    autoplay: PropTypes.bool,
}

VideoPlayer.defaultProps = {
    controls: true,
    autoplay: false,
}

export default VideoPlayer

Answer 1

Your buttons won't be visible in fullscreen unless they are chidren of the fullscreen element. Simplest is to make the buttons a child of the player element, like the example in the Video.js docs .