I am currently having some difficulty with integrating Video.js in my create-next-app project, specifically in loading the video.js.css file. Here is a snippet of how my component is structured:
import videojs from 'video.js'
import videoStyles from '../node_modules/video.js/dist/video-js.min.css'
export default class VideoPlayer extends React.Component {
componentDidMount() {
this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
console.log('onPlayerReady', this)
});
}
componentWillUnmount() {
if (this.player) {
this.player.dispose()
}
}
render() {
return (
<div>
<div data-vjs-player>
<video ref={ node => this.videoNode = node } className="video-js"></video>
</div>
<style jsx>{videoStyles}</style>
</div>
)
}
}
To load the external CSS file, I am utilizing styled-jsx/css loader.