css - 调整大小和 HTML 视频

Question

<!-- 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/

Answer 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 的帮助下添加了 Logo 。