Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a div with width 100% and height 50%. Basically it is a 16/8 ratio div. Now I want to fit video js player in it. The component which renders this 16/8 div is this (you can see the Player component inside video-container div

return (
            <div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                        *<Player/>*
css for video-container
.video-container
        width 100%
        background-color #000
        padding-bottom:  50%;
I have a Player component which is like this 
assign(props, {
        ref: 'video',
        controls: true,
        width: "960", height: "600"
return (
    <div class="video-wrapper">
        <video {... props}>
            <source src={videoSrc} type="video/mp4"/>
        </video>
    </div>)
videoplayer.css
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
.video-wrapper > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
I am getting this on my screen 
This is update till now
New update after editing 
.video-container
            width 100%
and removing width and height from video tag. 
What I want is this 
index.js 
return (
            <div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                        <Player/>
                    <div className='video-title'> {name} </div>
                    <div className='process-list'>
                            PROCESS_LIST.map((x,i)=> (
                                    className='process-item'
                                    key={i}
                                    onClick={this.toHome.bind(this)}> {x} </div>
                <div className='details-section'>
                    <VideoDetails/>
: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 80%
    .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
New Updates
you could use this approach by CSS. It's basically common problem and this is his common solution.
http://jsfiddle.net/t1gsrsu5/3
Simply render in React wrapper div and video element, and css will handle the ratio for you.
.playerDiv
   .video-wrapper
      video
the video will be in ratio 16:9 based on size of .playerDiv.
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
.video-wrapper > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
<div class="video-wrapper">
<video controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
                I edited the answer. Best solution will be, if the Player render the .video-wrapper and video element. (You don't need PlayerLogic at all). Then whenever you render Player video will be in 16:9 ratio relative to the parent div of the Player.
– jukben
                Jan 15, 2017 at 9:03
                I am updating the question. I did what u suggested. But I am getting something else. Have a look
– EdG
                Jan 15, 2017 at 9:12
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.