Full-Stack React Projects - Second Edition

Fullscreen

Users will be able to view the video in fullscreen mode by clicking the fullscreen button in the controls. The fullscreen button for the player will be rendered as shown in the following screenshot:

In order to implement a fullscreen option for the video, we will use the screenfull Node module to track when the view is in fullscreen, and findDOMNode from react-dom to specify which Document Object Model (DOM) element will be made fullscreen with screenfull.

To set up the fullscreen code, we first install screenfull, by running the following command from the command line:

yarn add screenfull

Then, we will import screenfull and findDOMNode ...