Create a floating video player in React

Question

I have installed the React-Player module and it works great. However, I am having some issues with trying to set the player inside an Element that will make it act like a floating player which will display across my application, no matter which page I navigate to.

return (
        <PageContainer maxWidth="xl">
            <Table
                config={{...groupsTable, label: page} }
                onActions={getAction}
                processData={groupsCb}
                reload={reload}
                setReload={setReload}
                props={{
                    params: {
                        _id: urlParams.id,
                    },
                }}
            />
            {showPlayer ? 
            <div className="player-wrapper">
                <Button onClick={closePlayer}>Close</Button>
                <ReactPlayer url={currentVideo} muted={true} controls={true} pip={true} playing={false} />
            </div> : null}

            <Create onClick={createNewGroup}/>`your text`
        </PageContainer>
    )

`

Here you see that I have wrapped the player in a div with a className of "player-wrapper", but my CSS is not doing what I want it to do....

Would there be a better way to allow for the video to start off in the right-hand corner and be in its own element so to speak and then be visible throughout the application as I navigate?

CSS:

.player-wrapper {
    position: fixed;
    width: 450px;
    height: 300px;
    bottom: 40px;
    right: 40px;
    background: #000;
}

what is your CSS problem? what it should and doesn't do it and what it's doing right now? — Farbod Shabani, Nov 17 '22 at 14:27
Hi @FarbodShabani, it places the video in the right-hand corner as expected, BUT what I want it to do is be kind of an overlay.....I want to be able to drag it, resize it and most importantly I want it to be visible on all pages — Hein, Nov 17 '22 at 14:57

score 0 · Answer 1 · answered Nov 17 '22 at 15:11

you can use the draggable="true" to make an element in your HTML draggable. you can get the offset of your element from top or bottom to know where it's and set your position: absolute and then set your top: element offset. this way you can make it draggable. for information you can go to this link and test it.

Create a floating video player in React

1 Answers1