title: Fit div container to video size (fullscreen as well)
body: <p>I'm trying to get a text overlaying a video and behave accordingly to its resizing.</p>
  
  <p>Currently my trouble is to make the container of the video at the same size as the player (as well as in fullscreen mode).</p>
  
  <p>My container is positioned relatively and both my video and text overlay div are positioned absolutely:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
          &lt;video id="videoPlayer" controls="true"&gt;&lt;/video&gt;
          &lt;div id="videoCaption"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
  position: relative;
  }
  
  #videoPlayer{
  position: absolute;
  z-index: -1;
  }
  
  #videoCaption{
  position: absolute;
  z-index: 2147483647;
  font-size: 80%;
  line-height: 125%;
  text-align: left;
  color: #c9302c;
  background-color: #000000;
  font-weight: normal;
  text-decoration: none;
  font-family: "monospaceSansSerif";
  }
  </code></pre>
  
  <p>Here a working example: <a href="https://jsfiddle.net/xw17xbc9/1/" rel="noreferrer">https://jsfiddle.net/xw17xbc9/1/</a></p>
  
  <p>Container has no height (1904px x 0px), video player is 1280px x 720px and my videoCaption div is 205px x 16px (size that take the text), stuck ar the top-left corner of the player.</p>
  
  <p>Well, basically the result I'd like to achieve is a little bit like the Youtube videos pop-ups overlaying.</p>
  
  <p>Any lead is welcome.</p>
  
  <p>Thanks</p>