Discussion on: How to add an overlay to your web video chat

[MANISH PRAJAPATI]

Yes, But for now, I have added only static element there

<p className="name">Manish Prajapati</p>

I need to show this name on video frame

I will work on geolocation after styling.

[Phil Nash]

Ah, I see.

Ok, you have two problems (and then another one coming down the line).

First, you have the wrong id on your video container. It's currently:

        <div id="video-container live">

ids can't have spaces and that live should be a class. There is a second problem you have in the JSX where the surrounding <div> has a class and not a className.

But, there's one further thing to watch out for. You will have multiple <Participant> components on the page, so you should not use ids for that. You could change video-container to a className and then change the CSS from #video-container to .video-container.

So, your participant JSX should be:

    <div className="participant">
      <h3>{participant.identity}</h3> 
      <div className="videos">
        <div className="video-container live">
          <p className="name">Manish Prajapati</p>
          <video ref={videoRef} autoPlay={true} />
        </div>
      </div>
      <audio ref={audioRef} autoPlay={true} muted={true} />
    </div>

And the CSS should be:

.video-container {
  position: relative;
}

.video-container::before {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 140px;
  height: 32px;
  background: url('data:image/png;');
  background-size: cover;
}

.video-container video {
  max-width: 100%;
}

.video-container::before,
.name {
  opacity: 0;
  transition: opacity 0.5s;
}

.video-container.live::before,
.live .name {
  opacity: 1;
}

Try that and see how you get on.

[MANISH PRAJAPATI]

Ahhhhhhhhhh!!! my bad, that I missed the id, I am thinking it was a class. Yes, it works!!
Thanks Dear :) Happy coding.