0

I am working on a project where I need to show label after the video finish playing . The current output shows like this enter image description here

See the label of next ep in 10 seconds . This is working fine in normal case but when I do fullscreen the label gets disappeared . Here is my react code for the this part 

  <div style={{ position: 'relative' }} id='outsideVideo' >
            <Video disableremoteplayback="true"
              id="videoId"
              onEnded={this.onVideoEnd}
              onPause={this.onVideoPause}
              width="100%"
              autoPlay={this.state.autoPlay}
              controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
              poster={this.getInfo() ? this.getInfo().background : ''}
              ref='videoRef'
              style={{position:'relative'}}
              src={this.getLink() ? (this.getLink().jwplayer && this.getLink().jwplayer.length ? this.getLink().jwplayer[0].file : null) : null}>
            </Video>
            <div style={{  position: 'absolute', bottom: 40, right: 0, zIndex: 999 }} id='nextEpisodeLabel'>
              <label style={{ fontSize: '0.8rem', fontWeight: 600, color: 'white', padding: '5px 10px', margin: 5, backgroundColor: '#0487d6', position: 'absolute', right: 0, bottom: 0 }}>
                Next ep in 10 seconds
                  </label>
            </div>


          </div>

What can I do so that the label don't get disappered in the fullscreen

ashok poudel
  • 703
  • 11
  • 28

1 Answers1

0

When the video is fullscreen, the components that need to be on top of the video will need to specify a z-index: 2147483647 CSS attribute as said in the MDN here.

The default browser controls have to be hidden with:

video::-webkit-media-controls { display:none !important; }

The custom controls container needs to have a special z-index value: 

.controls { z-index:2147483647; }

With that said, you should specify this propperty on your label when the video is fullscreen as the code bellow:

<div style={{ backgroundColor: 'black', position: 'absolute', left: 0, top: 0, width: '100%', height: '100%', zIndex: 2147483647 }}>
  <label style={{ fontSize: '0.8rem', fontWeight: 600, color: 'white', padding: '5px 10px', margin: 5, backgroundColor: '#0487d6', position: 'absolute', right: 0, bottom: 0 }}>
    Next ep in {this.state.countdown} seconds
  </label>
</div>
Pedro Paulo
  • 36
  • 4