title: Place div over part of video background, scalable
body: <p>I have .mp4 as background of my site. The video is containing some non-moving elements. Let's say a square.</p>
  
  <p>I want to place a div over this square and let it scale with the video if the window resizes. </p>
  
  <p>I am testing, but the main problem is that the aspect ratio of the div is changing when resizing the window.</p>
  
  <p>jsfiddle with example video:
  <a href="https://jsfiddle.net/xhrub7so/6/" rel="nofollow noreferrer">https://jsfiddle.net/xhrub7so/6/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="fullscreen-bg"&gt;
          &lt;video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video"&gt;
              &lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
          &lt;/video&gt;
      &lt;/div&gt;
      &lt;div class="url_1"&gt;
              test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .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%;
  }
  </code></pre>
  
  <p>Thanks for the help.</p>