I recently installed the React-Player module and it is functioning perfectly. However, I am encountering some difficulties in trying to embed the player within an Element so that it appears as a floating player across my application, regardless of the 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>
)
`
As you can see, I have enclosed the player in a div with a className of "player-wrapper", but my CSS styling is not producing the desired results....
Is there a more effective approach to ensure that the video starts in the right-hand corner, remains contained within its own element, and stays visible throughout the application as I navigate?
CSS:
.player-wrapper {
position: fixed;
width: 450px;
height: 300px;
bottom: 40px;
right: 40px;
background: #000;
}