屏幕尺寸缩小时如何定位背景视频？ HTML / CSS

Question

当屏幕尺寸缩小时，我试图将背景视频放在标题中。 全屏：

当前手机版：

当屏幕变小时，我想专注于视频的右下角，我不确定为什么它不起作用？我在视频标签中使用了背景位置，这不起作用......

.page-header {
  background-color: #B2AFAB;
  background-position: center center;
  background-size: cover;
  min-height: 100vh;
  max-height: 999px;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}

video {
  position: absolute;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  opacity: 0.85;
  /* transparency */
  background-position: right bottom;
}

@media screen and (max-width: 991px) {
  .header-4 video {
    width: auto;
    height: 100vh;
  }
}

<div class="wrapper">
  <!-- video header -->
  <div class="header-4">
    <div class="page-header">
      <!-- We show the video image placeholder instead of the video for small devices  -->
      <div class="video-image visible-xs visible-sm" style="background-image: url('assets/img/video-placeholder.png')"></div>
      <video id="video-source" autoplay="autoplay" preload="auto" loop="loop" muted="muted" volume="0">
            <source src="assets/video/lightbulb.mp4" type="video/mp4">
            Video not supported
        </video>
      <div class="content-center">
        <div class="container upper-container text-left">
          <div class="video-text">
            <h1 class="title title-no-upper-margin" style="line-height: 1.5;">
              <b> Changing Africa with <br> <span class="burgundy" id="typeitheader"></span></b>
            </h1>
          </div>
          <br />
        </div>
      </div>
    </div>
  </div>

非常感谢你的帮助！

编辑：这是video。

的链接