Trying to fit a camera video over another - html

Question

I am trying to set a video over another one by using the css property by making the video position relevant to another one.
As you see in the pic I am trying to position the small video in the right corner. However the position of the small screen changes whenever I change the browser screen. For example it changes when I see the website in a bigger screen.
Can you please help me.
<div class="containerdiv">
<video class="own large" id="myvideo" autoplay="true" muted="true"></video>
<video class="own small" autoplay="true" muted="true"></video>
<video class="peer large" autoplay="true"></video>
<video class="peer small" autoplay="true"></video>
</div>
.containerdiv{
position: relative; right: 0; top: 0; left: 0
}
.own.large{
position: relative; top: 0; right: 0%;
width: 40%;
height:50%;
}
.own.small{
position: absolute; top: 80%; right: 50.3%;
width: 15%;
height:20%;
}
.peer.large{
position: relative; top: 0; left: 0% ;
width:40%;
height:50%;
}
.peer.small{
position: absolute; top: 77.5%; right: 16.5%;
width:15%;
height:20%;
}
#camOption{
}
#switchPeerCam{
}
</style>

Answer 1

screen # 2
as you see here the small video is fit within the wanted place.

Answer 2

.own.small{
position: absolute; bottom: 0; right: 0;
width: 15%;
height:20%;
}
.peer.small{
position: absolute; bottom: 0; right: 0;
width:15%;
height:20%;
}
If you give your small window position as percentage, it changes when the screen changed.