Videojs disables the click events of all the clickable components

[apurvgandhwani]

When I include videojs in my react applications page then other buttons of other components stopped working. When I click on them, nothing happens. This goes true for tab clicks, button clicks, table row clicks. But when I remove the player from the page, then button starts working in a normal fashion. Is there any help I could get?

<div className={c.container}>
			<div className='video-section'>
					<Player/>
				<div className='video-title'> {name} </div>
				<div className='process-list'>
                    {
                        PROCESS_LIST.map((x,i)=> (
							<div
								className='process-item'
								key={i}
								onClick={this.toHome.bind(this)}> {x} </div>
                        ))
                    }
				</div>
			</div>
			<div className='details-section'>
				<VideoDetails/>
			</div>
		</div>

[apurvgandhwani]

I got the reason of the problem. I solved it by placing at the bottom of the rendering tree in above code. If player gets rendered at last then it solved the problem. If you render the player first, then it blocks the functionalities of other components. Anyone with the proper reason for this behavior?

[mmcc]

Have you checked out some of the other issues related to using Video.js in a React component? I have a feeling like that might be related here.

Closing because you found a solution and without more details (such as the actual Player component implementation) we're going to struggle to provide much more help.