Trying to fit a camera video over another

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>

"relevant to another one" you mean relative? – andrew Jun 23 '16 at 15:46 — andrew, Jun 23 '16 at 15:46

score 0 · Answer 1 · answered Jun 23 '16 at 15:46

0

screen # 2

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

answered Jun 23 '16 at 15:46

faisal

1
1

please don't annotate your question with an answer, edit your question instead – andrew Jun 23 '16 at 15:48

score 0 · Answer 2 · answered Jun 23 '16 at 15:47

0

.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.

answered Jun 23 '16 at 15:47

chnselim

244
1
3
16

can you please illustrate more, I am still a beginner in programming. – faisal Jun 23 '16 at 15:51
if you say 500px it is definetly will be 500px, but if you say 30% it will be the 30% of your screen. same thing with your example. bottom: 0 right: 0 aligns your window right-down corner. more info is here: http://stackoverflow.com/a/7965639/6479329 @faisal – chnselim Jun 23 '16 at 15:55
but I actually did that, I gave my small windows percentages. – faisal Jun 23 '16 at 16:15
.own.small{ position: absolute; top: 80%; right: 50.3%; width: 15%; height:20%; } .peer.small{ position: absolute; top: 77.5%; right: 16.5%; width:15%; height:20%; } as you can see the positions here are in percentage. – faisal Jun 23 '16 at 16:15
I have to use a unit. bottom:0 right:0 will make the small screen to set in the right corner not even above the large screen. I tried to use px and as you said that does not work. I need to use numbers other than 0 with the right unit. Thank you so much for your comments. – faisal Jun 23 '16 at 16:30

Trying to fit a camera video over another

2 Answers2