Bootstrap4：在视频上方放置图像

Question

所以我想在视频顶部放置一个透明徽标（包含主要部分的所有宽度和高度）。我正在为这个特定的网站使用 Bootstrap4，视频是响应式的，所以我希望顶部的徽标也响应式。我确实尝试了绝对位置，位置相对方法，但没有任何结果。所以也许有人可以帮助我解决这个问题。

代码：

HTML：

    <main>
  <div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
      <source
        src="/artwork/Video/Final_Edit.mp4"
        type="video/mp4"
      />
      <img class="imgTransparant" src="artwork/Fotos/1x/logo_transparant.png" alt="transparante logo">
    </video>
  </div>
</main>

CSS：

  video {
position: relative;
height: auto;
width: 100%;
}

.imgTransparant {
position: absolute;
top: 50%;
right: 0;
}

Answer 1

你必须稍微改变你的html结构和css，希望它对你有用。

.embed-responsive {
        position: relative;
    }

    video {
        height: auto;
        width: 100%;
    }

    .imgTransparant {
        position: absolute;
        top: 50%;
        right: 0;
    }

<main>
    <div align="center" class="embed-responsive embed-responsive-16by9">
        <video autoplay loop class="embed-responsive-item">
            <source src="/artwork/Video/Final_Edit.mp4" type="video/mp4" />
        </video>
        <img class="imgTransparant" src="artwork/Fotos/1x/logo_transparant.png" alt="transparante logo">
    </div>
</main>