Making web application fit fully on screen using React

Question

I am trying to create a responsive layout using React. I found that the Holy Grail layout fits best to my needs and I am trying to make the one found on this fiddle work (It is not mine): Holy Grail fiddle.

I am also using video-react for my video player, video-react.

The layout I get is not fitting on the screen when it's full size, but fits pretty well when it is in mobile view.

And here is my code:

App.js

render() {
    const { expanded } = this.state;
    return (
        <React.Fragment>

            <nav className="header navbar navbar-light bg-success mb-auto">
                <span className="navbar-brand mb-0 h1" style={{paddingLeft: '10%'}}>Venoossed</span>
            </nav>


            <div className="holygrail-body">
                {/*KokPlayer*/}
                <div className="content">
                    <KokPlayer currentUrl={this.state.source} playerState={this.state.playerState}/>
                </div>

                <div className="side-navigation">
                    <hr />
                    <div style={{width: 'inherit'}}>
                        <Sidenav
                            expanded={expanded}
                            defaultOpenKeys={['3', '4']}
                            activeKey={this.state.activeKey}
                            onSelect={this.handleSelect}
                        >
                            <Sidenav.Body className="bg-light">
                                <Toggle onChange={this.handleToggle} checked={expanded}/>
                                <Nav>
                                    {this.sources.map(source =>
                                        <Nav.Item key={source.id} eventKey={source.id} icon={<Icon icon="dashboard"/>}>
                                            {source.name}
                                        </Nav.Item>
                                    )}

                                    <Dropdown eventKey="3" title="Advanced" icon={<Icon icon="magic" />}>
                                        <Dropdown.Item >Geo</Dropdown.Item>
                                        <Dropdown.Item >Devices</Dropdown.Item>
                                        <Dropdown.Item >Loyalty</Dropdown.Item>
                                        <Dropdown.Item >Visit Depth</Dropdown.Item>
                                    </Dropdown>
                                </Nav>
                            </Sidenav.Body>
                        </Sidenav>
                    </div>
                </div>
            </div>

            <nav className="footer navbar navbar-light bg-success mb-auto">
                <div style={{display: 'block', margin: '0 auto', verticalAlign: 'middle'}}>
                    <Button onClick={() => this.changePlayerState('play')} className="mr-3">
                        play()
                    </Button>
                    <Button onClick={() => this.changePlayerState('pause')} className="mr-3">
                        pause()
                    </Button>
                    <Button onClick={() => this.changePlayerState('fs')} className="mr-3">
                        FullScreen()
                    </Button>
                </div>
            </nav>

        </React.Fragment>
    );
}

holygrail.scss

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
}
body .header {
  width: 100%;
  height: 60px;
  background: pink;
}
body .holygrail-body {
  flex: 1 0 auto;
  display: flex;
}
body .holygrail-body .content {
  flex: 1 0 auto;
  background: lightgreen;
}
body .holygrail-body .side-navigation {
  width: auto;
  list-style: none;
  text-align: left;
  order: -1;
  background: yellow;
  margin: 0;
}
body .holygrail-body .flex-aside {
  width: auto;
  background: orange;
}
body .footer {
  width: 100%;
  height: 60px;
  background: cyan;
}
@media (max-width: 700px) {
  body .holygrail-body {
    flex-direction: column;
  }
  body .holygrail-body .side-navigation, body .holygrail-body .flex-aside {
    width: 100%;
  }
}

My question is, how can I make it fit fully on screen?

EDIT

Adding also the KokPlayer render part:

render() {
    return (

        <div className="video-wrapper">
            <Player ref="player" autoPlay muted>
                <source src={this.props.currentUrl}/>
                <ControlBar disableCompletely/>
            </Player>
        </div>


    );
}

The problem is that, It does not care for header and footer and makes the video-player fit fully on screen, but for some reason it cares that there is a sidenav and fits itself properly. Is there a way to tell the video-player div that it should resize by taking header and footer into account?

Answer 1

Ahhh, I see. You're talking about the player's height pushing the application size beyond the current window size. That's what I figured you were talking about.

In that case, the problem arises from the player setting a padding-top of around ~56% (see class.video-react.video-react-16-9, .video-react.video-react-4-3 in the DOM). This calculation is off and is causing the player to expand beyond the window's innerHeight.

A solution I came up with was to create an event listener for the window.innerHeight and to calculate a new padding-top based upon the current window size. Using stylized-components I was then able to apply this new padding-top offset to the .video-react.video-react-16-9, .video-react.video-react-4-3 classes.

Working example: https://ox69p34op5.codesandbox.io/ (please note that this example doesn't include any CSS breakpoints for mobile devices).

What the fix looks in the DOM:

Answer 2

The video react components make the player width take 100%. To fix it try this when rendering your components:

    export default props => {
      return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
          fluid={false}
        />
      );
    };