试图将摄像机视频放在另一个视频上

Question

我试图通过使视频位置与另一个视频位置相关来使用css属性将视频设置为另一个视频。

正如你在图片中看到的那样，我试图将小视频放在右下角。但是，每当我更改浏览器屏幕时，小屏幕的位置都会改变。例如，当我在更大的屏幕上看到网站时，它会发生变化。

你能帮我吗？

 <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

如您所见，小视频适合想要的地方。

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%;
}

如果您将小窗口位置设为百分比，则在屏幕更改时会发生变化。