Question

我正在尝试使用this

等视频背景制作标题

但我不想嵌入youtube或其他东西。我只想要一个简短的视频作为背景，并让它具有响应性。

到目前为止，这是我的代码。我的问题是，当我在手机，平板电脑等上测试时，它并没有坚持全高。

<header>
    <video poster="pic.jpg" loop="loop" preload="auto" autoplay="autoplay" volume="0">
        <source src="pic.mp4" type="video/mp4">
    </video>
</header>

header {
    position: relative;
    height: 100%;
    width: 100%;
}
video {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   overflow: hidden;
   height: auto;

}

http://imgur.com/a/U3tFf问题。

Answer 1

试试这个

<header>
   <video poster="pic.jpg" loop="loop" preload="auto" autoplay="autoplay" volume="0">
    <source src="http://d.pr/v/DEyST/5QDjeczO+" type="video/mp4">
   </video>
</header>

CSS

    video {
      object-fit: cover;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
    }

    html, body {
      height: 100%;
    }
    html {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      font-size: 150%;
      line-height: 1.4;
    }
    body {
      margin: 0;
    }

    .viewport-header {
      position: relative;
      height: 100vh;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    h1 {
      font-family: 'Syncopate', sans-serif;
      color: #4a3a27;
      text-transform: uppercase;
      letter-spacing: 3vw;
      line-height: 1.2;
      font-size: 3vw;
      text-align: center;
      span {
        display: block;
        font-size: 10vw;
        letter-spacing: -1.3vw;
      }
    }

    main {
      display: none;
      width: 80vw;
      left: 10%;
      height: 40vh;
      overflow: auto;
      background: rgba(black, 0.66);
      color: white;
      position: relative;
      padding: 1rem;
    }

来源：code

全高视频标题

1 个答案: