How to style video js

Issue #663

/** @jsx jsx */
import { css, jsx } from '@emotion/core'
import React from 'react';
import videojs from 'video.js'

export default class VideoPlayer extends React.Component {
    componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            console.log('onPlayerReady', this)
        });
    }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose()
        }
    }

    // wrap the player in a div with a `data-vjs-player` attribute
    // so videojs won't create additional wrapper in the DOM
    // see https://github.com/videojs/video.js/pull/3856
    render() {
        return (
            <div>
                <div data-vjs-player css={css`
                    
                `}>
                    <video 
                        ref={node => this.videoNode = node} 
                        className="video-js vjs-big-play-centered" 
                        data-setup='{ "playbackRates": [0.5, 1, 1.5, 2] }'
                        css={css`
                        width: auto;
                        height: 400px;
                    `}>

                    </video>
                </div>
            </div>
        )
    }
}

---

Updated at 2020-06-17 05:38:30