如何在页面的视频背景下放置列表？

<video autoplay muted loop id="video-bg">
  <source src="video.mp4" type="video/mp4">
</video>

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}

li {
  margin-bottom: 10px;
}

<ul class="video-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

.video-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
}

.video-list li {
  margin-bottom: 10px;
}