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

你的意思是什么？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

调整大小和HTML视频

1 个答案: