我有一个 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;
}
请帮我解决这个问题..谢谢
最佳答案
无需过度设计,您只需要:
全屏的完整代码
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>
解释
- 边距/填充:0
通常称为全局重置。此过程只是设置边距和填充的默认值,因此消除了任何经常变化的特定于浏览器的默认值。
- html: 100%
默认情况下,页面的 html 仅与其包含的内容一样高。 将 html 的高度设置为 100% 将使高度成为浏览器可见区域的高度。
- 正文:100%
正文遵循与 html 相同的渲染原则。通过将高度设置为 100%,我们要求正文填充其容器的高度,在本例中为 html。
- 网站 div:100%
拥有一个包裹整个网站的主 div 通常是一个很好的做法,可以完全控制布局而无需过度操作 body 标签。将高度设置为 100% 将使 div 填充其容器的高度,在本例中为 body 标签。
从这里开始有级联效果,允许任何后续的 block 级内容填充其容器的高度。除非我们以其他方式设置,否则它将始终为 100%。
任何高度为 100% 的 block 级元素放置在内容 div 中,如图像中那样,只会成为其容器的高度,因此不会填满屏幕。
(注意:使元素位置固定/绝对会将其从文档流中移除。在大多数情况下,其容器及其高度将由遇到的下一个相对定位的父元素决定。)
- 溢出:隐藏
默认情况下,即使元素没有滚动,滚动条通常仍会显示。设置 overflow hidden 只是删除溢出的内容,从而删除滚动条。由于在这种情况下内容永远不会溢出,因此没有必要。
- 内嵌框架:100%
Youtube 使用 iframe 嵌入其视频内容,因此将高度设置为 100% 将使 iframe 的高度和随后的视频在其容器的高度内。
我建议将 iframe 本身的高度设置为 100%,而不是在 css 中,原因有二:
如果您的网站中有多个 iframe,将为它们设置高度。如果这是需要的,那不是问题。
从 youtube 复制嵌入代码时,始终会设置默认高度和宽度。 iframe 应该直接应用高度和宽度属性。我个人认为设置高度/宽度然后用 css 覆盖不是很好的做法。
(注意:这与我认为所有样式都应该在css内完成的观点相反)
如果 iframe 之上的所有父容器都设置为 100%,一直到 html 元素;视频将是浏览器可见窗口的高度。
关于html - 在自定义高度问题中添加完整视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26230591/