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

Question

这是我的图片标题。我想保留视频，但在顶部添加一些文字（徽标），例如：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＆＃34; overlay-desc＆＃34;来在视频上添加文本。

因此，如果您更改了文字，并将视频来源更改为您拥有的视频链接，那么您就会很好。

这里没有他们的内容：

<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。

修改

要在视频上放置图像（例如徽标），您可以将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;
}

希望这会有所帮助！