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

Question

我有一个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 ..

video#video-player {
  position: fixed; right: 0; bottom: 0;
  min-width: 100%; min-height: 70%;
  width: auto; height: auto; z-index: -100;
 }

请帮帮我..谢谢

Answer 1

没有必要对此进行过度设计，您只需要：

FULLSCREEN的完整代码

CLICK FOR DEMO

<强> 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 （替代方案）

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

---

说明

• margin / padding：0

通常被称为全局重置。此过程只是设置边距和填充的默认值，因此消除了经常变化的任何浏览器特定默认值。

• html：100％

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

• 身体：100％

正文遵循与html相同的渲染原则。通过设置高度100％，我们要求身体填充其容器的高度，在这种情况下是html。

• site div：100％

通常一个很好的做法是拥有一个包装整个网站的主div，授予对布局的完全控制权，而不会过度操纵body标签。设置高度100％将使div填充其容器的高度，在本例中为body标记。

从这里开始，有一个级联效果，允许任何后续的块级内容填充其容器的高度。除非我们另外设置，否则这将始终为100％。

高度为100％的任何块级元素放置在内容div中，如图像中所示，只会变为其容器的高度，因此不会填满屏幕。

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

• 溢出：隐藏

默认情况下，即使元素没有滚动，也会经常显示滚动条。设置溢出隐藏只会删除溢出的内容，从而删除滚动条。因为在这种情况下内容永远不会溢出，所以它们不是必需的。

• iframe：100％

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

我建议将iframe本身的高度设置为100％，而不是css，原因有两个：

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

2. 从youtube复制嵌入代码时，始终会设置默认的高度和宽度。 iframe应该直接应用高度和宽度属性。我个人认为设置高度/宽度然后用css覆盖是不错的做法。

（注意：这与我自己认为所有样式都应该在css内完成相反）

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