0

I have .mp4 as background of my site. The video is containing some non-moving elements. Let's say a square.

I want to place a div over this square and let it scale with the video if the window resizes.

I am testing, but the main problem is that the aspect ratio of the div is changing when resizing the window.

jsfiddle with example video: 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%;
}

Thanks for the help.

  • Try using media queries then – Viira Aug 09 '18 at 07:48
  • You mean at fixed screen widths? But then the aspect ratio will still change when resizing the screen a little right? –  Aug 09 '18 at 07:52
  • May I know what is your desired result? – Viira Aug 09 '18 at 07:56
  • For example, the video is containing a square at a fixed position, i want to place a div over that square with the same aspect ratio. Even when the screen resizes. In the jsfiddle you see that the div is changing shape when the screen resizes –  Aug 09 '18 at 08:02

0 Answers0