Adding inner divs on bottom -right corner of a video

Question

I'm working on a video chat application using Nodejs, socket.io and WebRTC (peerjs library). On the login page, a user inserts his/her name and is redirect to the page whereby his video streams (via WebRTC) and can connect with his peers. This is working fine and videos are being added dynamically in the DOM. Once each peer joins, I would like to append the name of each logged in user at the bottom-right corner of his/her video dynamically using Javascript.

In my function below, I have added a static name just for debugging purposes

JavaScrpt Function

//Function that appends all the videos to the DOM (Working fine)
const videoGrid = document.getElementById('video-grid');

const addVideoStream = (video, stream) => {
    video.srcObject = stream
    video.addEventListener('loadedmetadata', () => {
      video.play()
    })
    videoGrid.append(video)
    //Here I create a div, add the name in it and append on top of video
    const testName = "John Doe"
    const div = document.createElement('div');
    div.classList.add('video-name');
    const html = `
    <i class="fas fa-microphone"></i>
    <span>${testName}</span>
     `
    div.innerHTML = html;
    video.appendChild(div);
}

Markup

<div class="main__videos">
<div id="video-grid">
    {/* Add videos dynamically via Js */}
</div>
</div>

CSS

//CSS
//Parent Container that holds all videos
#video-grid{
    display: flex;
    width: 1090px;
    overflow-y: auto;
    flex-wrap: wrap;
    position: relative;
 }

 //Each video
 video{
    height: 250px;
    width: 350px;
    object-fit: cover;
    padding: 8px;
    position: relative;
 }
  
 //Name styles that are being added dynamically
 .video-name {
    justify-content: end;
    position:absolute;
    left: 0;
    z-index:1;
    color: red;
    background-color: orange;
}

Answer 1

I have came up with a possible solution. You had a lot of missing ; in the code you posted, but i assume that if you had the function working they are properly posted there.

In here I create a dummy <div class="video"></div> element for testing purposes, instead of creating a <video> tag element. Also I changed the order of the javascript so first I declare the function to add the video and the inner div, then i create the dummy video element with a null stream, next i call the function.

Inside the function I first get the videoGrid element and the run the code as you had it.

I've also changed the css code accordingly to work with the <div class="video"> element instead of the <video> tag and changed some of properties of the video-name and the video elements.

 //Function that appends all the videos to the DOM (Working fine) const addVideoStream = (video, stream) => { const videoGrid = document.getElementById('video-grid'); video.srcObject = stream; video.addEventListener('loadedmetadata', () => { video.play(); }) videoGrid.append(video); //Here I create a div, add the name in it and append on top of video const testName = "John Doe"; const div = document.createElement('div'); div.classList.add('video-name'); const html = ` <i class="fas fa-microphone"></i> <span>${testName}</span> `; div.innerHTML = html; video.appendChild(div); } const video = document.createElement('div'); video.classList.add('video'); const html = 'A video'; video.innerHTML = html; addVideoStream(video,null);

 #video-grid { display: flex; width: 1090px; overflow-y: auto; flex-wrap: wrap; position: relative; /* Added properties */ background-color: rgba(0,0,0,0.5); color: black; }.video { height: 250px; width: 350px; object-fit: cover; padding: 8px; position: relative; /* Added properties */ border: dashed 1px black; }.video-name { /* justify-content: end; <------- Removed */ position: absolute; /* left: 0; <------- Removed */ z-index: 1; color: red; background-color: orange; /* Added properties */ bottom: 0; right: 0; width: 50%; }

 <div class="main__videos"> <div id="video-grid"> The grid </div> </div>