使 videojs 播放器适合 div 尺寸

Question

我有一个反应应用程序，其中我有一个带有媒体播放器和其他组件的页面。我已经制作了一个 div 以像这样适合播放器。

现在只是一个空的 div。这是我的组件的一部分，其中定义了整页

return (
            <div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                    <div className='video-player'></div>

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

这是这个组件的css

:local(.container)
    display flex
    flex 1

    .video-section
        margin 24px
        flex 1
    .details-section
        margin 24px
        width 33vw
        flex-shrink 0
        display flex
        flex-direction column
        // border-left 1px rgba(#000, 0.12) solid

    .video-container
        width 100%
        background-color #000
        ratio-box(16/8)
    .video-title
        font-size 2.4em
        margin-top 4vh
        margin-bottom 4vh

    .video-section .process-list
        display flex
        width 100%

        .process-item
            flex 1
            background-color #D7D7D7
            padding 18px 30px
            font-size 1em
            text-align center
            border-radius 8px
            margin 0 4px
            cursor pointer
            &:hover
                background-color darken(@background-color, 10%)


:local(.container)
    .video-details-container
        flex 1
        display flex
        flex-direction column

    .comments-section, .tabbed-section
        min-height 100px
        background-color #fff
        border 1px rgba(#000, 0.12) solid
        box-shadow 0 4px 24px 0 rgba(#000, 0.12)
    .comments-section
        height 180px

    .flex-vertical
        display flex
        flex-direction column
        height 100%

    .flex-fill
        flex 1

    .tabbed-section
        flex 1
        margin-bottom 20px
        display flex
        flex-direction column
        .tab-content
            flex 1

    .table-footer, .comments-footer
        clearfix()
        text-align right
        padding 10px
        border-top 1px rgba(#000, 0.2) solid

    #comments-input
        flex 1
        border none
        padding 20px
        outline none


    .flags-table 
        .red-box
            width 16px
            height 16px
            margin 3px 5px
            background-color red

所以现在当我把一个videojs播放器放在这样的div中时，它不适合黑盒子。 VideoJs 目前在我的代码中定义了它自己的宽度和高度道具。但是当我删除那些认为 js 会自动获取黑盒尺寸的道具时，这不会发生。它有异常的尺寸。我还包括我的视频 js 代码摘要。

<div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                        <Player/>
                    </div>
                    <div className='video-title'> {name} </div>

视频js

assign(props, {
            ref: 'video',
            controls: true,
            width: "960", height: "600"
        });


        return (
            <div>
                <video {... props}>
                    <source src={this.props.src} type={this.props.type} id={this.props.id}/>
                </video>
            </div>)

    }

在视频播放器 div 中包含播放器后更新了视图。

更新

这样做之后

.video-container
        position: relative
        width: 500px
        height: 300px

    .video-player
        position absolute
        width 50vw
        height 30vh

<div className='video-section'>
                    <div className='video-container'>
                        <div className='video-player'>
                            <Player/>
                        </div>
                    </div>

我还是明白了

Answer 1

您可以将以下样式分配给视频播放器 div：

//!important 禁用默认样式 //根据需要设置宽度

.video-player {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

干杯:)