html中的视频横幅(引导页面)布局不正确 [英] Video banner in html (bootstrap page) incorrectly laid out

问题描述

我正在尝试从此站点改编代码:视频头摘要

I am attempting to adapt code from this site: Video Header snippet

这会放置一个视频标题，并覆盖我的整个页面和内容本身(视频标题).

This places a video header and it overrides my entire page and content with itself (the video header).

我想调整页眉的大小，以使其宽度为100％(在整个页面上)，高度为x(由我确定)，例如200.

I would like to resize the header so that it has a width of 100% (across the whole page) and a height of x (decided by me) e.g. 200.

我已经尝试了各种方法来更改覆盖大小和视频，但是没有任何效果.

I've tried various things to change both the overlay size and the video but nothing has worked.

<h1>My Website</h1> 
<p>Website text here</p>
<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
  </video>
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
      </div>
    </div>
  </div>
</header>

使用的所有CSS如下.请注意，这与实施了bootstrap css的样式表中使用的样式相同.

The whole of the css used is below. Note, this is used in the same style sheet as bootstrap css has been implemented.

header {
  position: relative;
  background-color: black;
  height: 15vh;
  min-height: 15rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 40%;
  width: auto;
  height: 40%;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

如您所见，我改编了原始代码(请参见上面的链接).例如，我已将此值从 100％更改为 40％.它的工作方式是更改覆盖大小.

As you can see I have adapted the code from its original (see link above). For instance I have changed this value from 100% to 40%. It works in that it changes the overlay size.

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 40%;
  width: 100%;

但是，我无法确定的是如何将视频也作为叠加层的一部分，并正确调整其大小，并使现有内容的其余部分不被视图隐藏/覆盖.

What I cannot figure out however is how to get the video also part of the overlay and sized correctly AND for the rest of my existing content not to be hidden from view/overwritten.

由于某种原因，一旦添加了此内容，便无法向下滚动浏览我的网站.

For some reason, once I add this content, I cannot scroll down through my site.

推荐答案

如果我理解您的问题:)，我认为将标题的 height 和 min-height 设置为 200px 可以解决以下问题:

If I understand your question :) , I think setting the height and min-height to 200px for the header fix the issue like :

header {
  position: relative;
  background-color: black;
  height: 200px;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
}

请参见以下代码段:

header {
  position: relative;
  background-color: black;
  height: 200px;
  min-height: 200px;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
  }
  header video {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<header>
  <div class="overlay"></div>
  <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
    <source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
  </video>
  <div class="container h-100">
    <div class="d-flex h-100 text-center align-items-center">
      <div class="w-100 text-white">
        <h1 class="display-3">Video Header</h1>
        <p class="lead mb-0">With HTML5 Video and Bootstrap 4</p>
      </div>
    </div>
  </div>
</header>

<section class="my-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto">
        <p>The HTML5 video element uses an mp4 video as a source. Change the source video to add in your own background! The header text is vertically centered using flex utilities that are build into Bootstrap 4.</p>
        <p>The overlay color can be changed by changing the <code>background-color</code> of the <code>.overlay</code> class in the CSS.</p>
        <p>Set the mobile fallback image in the CSS by changing the background image of the header element within the media query at the bottom of the CSS snippet.</p>
        <p class="mb-0">
          Created by <a href="https://startbootstrap.com">Start Bootstrap</a>
        </p>
      </div>
    </div>
  </div>
</section>

这篇关于html中的视频横幅(引导页面)布局不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！