title: Render an Element on Fullscreen Video.js in React App?
body: <p>**ORIGINAL POST HAS BEEN EDITED: I am working with Video.js in a React app. I need badges to appear on the video player at various points during the video based on a state change. The problem is, when I enter full screen mode, the video sits on top of the badges. I have the Z-index for both badges set to the max, and they still do not show. </p>
  
  <p>I've tried using a video overlay library, but I need the badges to render on particular state changes, and I'm having difficulty getting the overlay function to read the state change. I've attempted to add a class with the Video.js player.on('fullscreenchange') event, but have been unsuccessful with that as well. Any insight on how to get the badges to display while in fullscreen would be very much appreciated.</p>
  
  <p>Relevant JSX code: </p>
  
  <pre><code>    class VideoPage extends Component {
        constructor(props){
          super(props);
          this.state = {
            defaultPlayerOptions: {
              autoplay: false,
              controls: true,
              responsive: true,
              sources: [{
                src: "",
              }],
              isAdRolling: false,
              playbackRates: [0.25, 0.5, 1, 1.5, 2],
            },
            liveVideoPlaying: false,
          }
    }
  
  componentDidUpdate(prevProps){
       // overlay code here though it is not registering the state change. including it only for reference. 
  
       player.overlay(() =&gt;{
         if(liveVideoPlaying){
           content: 'Live'
        }
       else if (isAdRolling){
           content: 'overlay ad'
        }
     // the player is instantiated and then I've got the below:
     player.on('fullscreenchange', function (e){
            if(player.isFullscreen()){
              player.addClass('full-screen-badge')
            }
          })
  }
  
  render(){
   &lt;div className='video-player-bkgrnd'&gt;
          &lt;div className='video-container'&gt;
            &lt;div className='videoplayer'&gt;
            &lt;div className={isAdRolling ? 'ad-badge-wrapper': ''}&gt;
                  &lt;AdBadge/&gt;
             &lt;/div&gt;
             &lt;div className={!isAdRolling &amp;&amp; liveVideoPlaying ? 'live- 
             badge-wrapper': ''}&gt;
                  &lt;LiveBadge/&gt;
              &lt;/div&gt; 
              &lt;video ref={node=&gt;this.player_node=node} className='video- 
              js'&gt;
                  &lt;source src={videoURL}&gt;
                  &lt;/source&gt;
              &lt;/video&gt;
           &lt;/div&gt;
  
  }
  </code></pre>
  
  <p>Relevant SCSS code:</p>
  
  <pre><code>.videoplayer {
        .ad_badge {
            position: relative;
            top: -45rem;
            left: 10rem;
            z-index: 2147483647;
  
        }    
        .live-badge {
            position: absolute;
            top: -45rem;
            left: 76rem;
            z-index: 2147483647;
        }
    }
    .video-js{
          width: 1170px;
          height: 660px;
          margin: 121px 135px 79px 135px;
          box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.5);
    }
  </code></pre>