title: Container div equal height of video content
body: <p>Not sure why I can't get this to work. I'm certain I've used this method before but can't find anything on it and can't get the issue resolved.  I have a container div that contains a video.  The height and width of the video will always adher to the 16:9 ratio of the original video. The video is fixed as I will be adding more content to the container (.featured) div that will overlay over the video.  I need the height of the container to equal the height of the video in order to solve my problem (not to mention help out with responsive issues i will run into). My code is as follows:</p>
  
  <pre><code>        &lt;div class="featured"&gt;
          &lt;video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg"&gt;
              &lt;source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" &gt;
          &lt;/video&gt;
          &lt;div class="main-wrap"&gt;
              &lt;h1&gt;Learn&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--end featured--&gt;
  </code></pre>
  
  <p>And my sass: </p>
  
  <pre><code>.featured{width: 100%; height: auto;
  #featured-content{width: 100%; height: auto;position: absolute;}
  </code></pre>
  
  <p>}</p>
  
  <p>Problem is the content from the rest of my site is coming up over the top of the video.  Need the container div to match the height the video's auto height but can't get it to work for some reason.  Any help is much appreciated!</p>