Html 容器div视频内容的等高

不知道为什么我不能让它工作。我肯定我以前使用过这种方法，但在上面找不到任何东西，也无法解决问题。我有一个包含视频的容器div。视频的高度和宽度始终与原始视频的16:9比例一致。该视频是固定的，因为我将添加更多的内容到容器（.featured）div，将覆盖在视频上。我需要容器的高度与视频的高度相等，以解决我的问题（更不用说帮助解决我将遇到的响应问题）。我的代码如下：

        <div class="featured">
        <video loop id="featured-content" class="featured-video" poster="/sites/all/themes/merge/img/poster-frame.jpg">
            <source src="/sites/all/themes/merge/img/Atlanta-Test.mp4" type="video/mp4" >
        </video>
        <div class="main-wrap">
            <h1>Learn</h1>
        </div>
    </div><!--end featured-->

}

---

问题是，我网站其他部分的内容出现在视频顶部。需要容器div与视频的自动高度匹配，但由于某些原因无法使其工作。非常感谢您的帮助

您应该能够删除高度规格，并尝试将显示类型调整为内联块：

.featured {
    width: 100%;
    display:inline-block;
    }

---

（为清晰起见添加了红色边框）

您需要浮动视频

#featured-content { 
   float: left; 
 }

#featured-content { 
   float: left; 
 }