将div放在视频背景的一部分上，可扩展

Question

我将.mp4作为网站的背景。该视频包含一些固定的元素。我们说一个正方形。

我想在该正方形上放置一个div，并在窗口调整大小时使其随视频缩放。

我正在测试，但是主要问题是在调整窗口大小时div的纵横比正在改变。

jsfiddle与示例视频： https://jsfiddle.net/xhrub7so/6/

HTML

<div class="wrapper">
    <div class="fullscreen-bg">
        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
        </video>
    </div>
    <div class="url_1">
            test
    </div>
</div>

CSS

    .fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

}
.url_1
{
    position: absolute;
    margin-top:20%;
    margin-left:20%;
    width: 50%;
    height:30%;
    background-color: #cccccc;
    display:block;
}
.wrapper{
    width:100%;
    height:100%;
}

感谢您的帮助。