Html 在自定义高度问题中添加完整视频

我有一个Div，我正在添加视频。现在根据我的要求，我希望视频100%显示，这意味着它不应该从底部裁剪，但一旦我在css中添加了70%的高度，它就会减少30%，这是我不想要的..这是我的HTML

 <video id='video-player' autoplay preload='metadata' controls>
   <source src="css/Video/Sapno.MP4" type="video/mp4">
 </video>

---

请帮我解决这个问题。谢谢你，没有必要过度设计，你只需要：

全屏显示的完整代码

CSS

html,body{ margin:0; padding:0; height:100%; width:100%; }
#wrap-player{
    height:100%;
    width:100%;
    overflow:hidden;
}

HTML视频

<div id="wrap-player">
   <video id='video-player' height='100%' width='100%' autoplay preload='metadata' controls>
     <source src="css/Video/Sapno.MP4" type="video/mp4">
   </video>
</div>

HTML IFRAME（可选）

---

解释

• 边距/填充：0

通常称为全局重置。这个过程只是为边距和填充设置默认值，因此消除了任何浏览器特定的默认值，这些默认值通常会有所不同

• html:100%

默认情况下，页面的html仅与其包含的内容一样高。 将html的高度设置为100%将使该高度成为浏览器可见区域的高度

• 正文：100%

主体遵循与html相同的呈现主体。通过将高度设置为100%，我们要求主体填充其容器的高度，在本例中为html

• 地盘分区：100%

通常，一个主div包装整个网站是一个很好的实践，它可以在不过度操纵body标签的情况下完全控制布局。将height设置为100%将使div填充其容器的高度，在本例中为body标记

从这里开始，将出现一种级联效应，允许任何后续块级内容填充其容器的高度。这将始终是100%，除非我们设置其他明智的

任何高度为100%的块级元素放置在内容div内（如图像中）将仅成为其容器的高度，因此不会填充屏幕

（注意：使元素位置固定/绝对会将其从文档流中删除。在大多数情况下，其容器及其高度将由遇到的下一个相对定位的父元素确定。）

• 溢出：隐藏

默认情况下，即使某个元素没有滚动条，滚动条也会经常显示。设置overflow hidden只会删除溢出的内容，从而删除滚动条。由于此实例中的内容永远不会溢出，因此它们不是必需的

• iframe:100%

Youtube使用iframe嵌入其视频内容，因此将高度设置为100%将使iframe的高度以及随后的视频在其容器的高度内

我建议将iframe本身的高度设置为100%，如上所述，而不是在css中，原因有二：

如果您的网站中有多个iframe，则会为所有iframe设置高度。如果这是需要的，那么这不是问题

从youtube复制嵌入代码时，始终设置默认高度和宽度。iFrame应具有直接应用于它们的高度和宽度属性。我个人不认为设置一个高度/宽度，然后用css覆盖是好的做法

（注意：这与我自己的观点相反，即所有样式都应该在css中完成）

---

如果iframe之上的所有父容器一直设置为100%，直到html元素；视频将是浏览器可见窗口的高度。

您可能应该创建一个JSFIDLE来显示您的问题。@Matthias实际上HTML和CSS相当简单，所以我没有创建。。有什么建议吗？但问题不是那么容易理解，查看问题总是更好地理解它。希望帮助您的人可以轻松地摆弄您的小提琴，找到100%有效的解决方案。@Matthias我尝试创建小提琴，但无法在那里显示问题。非常抱歉。。！我不知道我是否真的理解你的问题，但也许将“高度”设置为100%会有所帮助，因为如果“高度”为“自动”，则“最小高度”将设置高度。

<div id="wrap-player">
   <video id='video-player' height='100%' width='100%' autoplay preload='metadata' controls>
     <source src="css/Video/Sapno.MP4" type="video/mp4">
   </video>
</div>

<div id="wrap-player">
     <iframe width="100%" height="100%" src="//www.youtube.com/embed/d__QncYv3VU" frameborder="0" allowfullscreen></iframe>
</div>