title: Make a div's size and position the same as a video's
body: <p>I have an HTML5 video with a width of 100% and also a height of 100% , and I want to wrap a div to fit the size and position of the video (not the video tag, but the video itself) using anything necesary.</p>
  
  <p><a href="http://jsfiddle.net/j5s6gomt/2/" rel="nofollow">[See Fiddle]</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;&lt;/div&gt;
  &lt;video id="vid" controls preload="none" width="100%" height="100%" poster="http://video-js.zencoder.com/oceans-clip.png"&gt;
      &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/&gt;
      &lt;source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/&gt;
      &lt;source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper{
    width: 2px;
    height: 2px;
    border: solid 2px red;
    position: absolute;
  }
  </code></pre>
  
  <p>JS (jQuery):</p>
  
  <pre><code>setInterval(function(){
      $("#vid").height($(window).height() - $("header").height() - 7);
      /*There is a header and a bunch of other stuff in the original code*/
  }, 10);
  </code></pre>
  
  <p>This is my first question here so if you need anything I'll be glad to answer. Thanks.</p>
  
  <p>EDIT: What I need is something like <a href="http://i.imgur.com/z51eGmu.png" rel="nofollow">this</a></p>