调整大小和 HTML 视频答案

【问题标题】：Resizing and HTML Video调整大小和 HTML 视频
【发布时间】：2015-09-13 22:19:15
【问题描述】：

<!-- Header -->
<header id="top">

    <video autoplay loop poster="towkio.png" style="height:675px; width:100%" id="bgvid">

<source src="towkio.mp4" type="video/mp4">

        <span id="logo">
            <img src="img/logo.png">
        </span>

</header>

我想将高度设置为 675 像素，并且仍然让它跨越整个宽度，它的行为很奇怪。

http://shearelegancechicago.com/todd/

【问题讨论】：

你能更准确地解释你想要什么吗？
shearelegancechicago.com/todd/example.png 视频的大小应为 675 并填满整个容器。 “视频”就是那张城市的照片
找不到页面
对不起，我放错了链接
明白，正在努力

标签： css twitter-bootstrap html5-video

【解决方案1】：

你的意思是这样的吗？

#video-bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 635px;
  z-index: 1;
}

@media (min-aspect-ratio: 16/9) {
  #video-bg > video {
      height: 300%;
      top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #video-bg > video {
      width: 300%;
      left: -100%;
  }
}

@supports (object-fit: cover) {
  #video-bg > video {
    top: 0; left: 0;
    width: 100%;
    height: 635px;
    object-fit: cover;
  }
}

#logo img {
    position: fixed;
    top: 50px;
    left: 0;
    z-index: 2;
    width: 50px;
    height: 50px;
}

<header id="video-bg">
    <video autoplay loop poster="towkio.png" id="bgvid">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</header>
<span id="logo">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/33/Vanamo_Logo.png">
</span>

Here 是现场演示。 Source。我刚刚更改了视频的高度，并在z-index 的帮助下添加了徽标。

【讨论】：

如此接近。只需要弄清楚如何将这些部分向下推。
@VeliborNikolic 你想把视频推到底部吗？
shearelegancechicago.com/todd 将工作部分移到视频部分下方，并可能固定容器的高度
@VeliborNikolic 到 #video-bg 应用 position: absolute 而不是 position: fixed。比在工作和联系部分玩弄边距。
如此接近。现在只有视频涵盖了徽标和导航抽屉。 z-index 似乎没有帮助