jquery - 如何将图像放在视频标题上

Question

这是我现在的图片标题。我想保留视频，但在顶部添加一些文本( Logo )，例如:https://www.pexels.com/blog/video-header-inspiration/

<div class="video-container">
   <video autoplay loop muted>
         <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">

   </video>
 <div class="overlay-desc">
    <h1>Wayne's World</h1>
    </div>
    </div>

     body {
    background: #333;
    }
     .video-container {
     position: relative;
     }
     video {
    height: auto;
    vertical-align: middle;
   width: 100%;
    }
   .overlay-desc {
    background: rgba(0,0,0,0);
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   display: flex;
  align-items: center;
  justify-content: center;
  }

Answer 1

您会将文本插入到 <h1> 中标签。这是从中采样的 codepen，创建者通过将文本放在 div“overlay-desc”中来在视频上添加文本。

因此，如果您更改那里的文本，并将视频源更改为您拥有的视频链接，就可以了。

这里没有他们的内容:

<div class="video-container">

   <video autoplay loop muted>
      <source src="YOUR LINK HERE" type="video/mp4">
   </video>

   <div class="overlay-desc">
      <h1>YOUR TEXT HERE</h1>
   </div>

</div>

但保留所有 CSS。

编辑

要在视频上放置图像(例如 Logo )，您可以将 div 切换为如下所示:

    <div class="full-containter">
      <div class="img-container"><img src="https://cdn.pixabay.com/photo/2016/03/31/20/20/bowler-1295700_1280.png"/></div>
      <video autoplay muted loop>
         <source src="http://www.icutpeople.com/wp-content/themes/icutpeople/assets/video/waynesworld.mp4" type="video/mp4">
      </video>
    </div>

您可以尝试一下 CSS，有几种不同的方法可以实现它。有的用float，有的用z-index。我可以通过以下方式实现结果:

.full-container {
  height: 100vh;
}

video {
  position: relative;
}

.img-container {
  height: 50px;
  position: absolute;
}

希望这对您有所帮助!