如何将div放置在视频底部并具有响应性

<style>
  .container {
    position: relative;
  }

  .video {
    width: 100%;
  }

  .custom-div {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
  }

  @media (max-width: 768px) {
    .custom-div {
      width: 100%;
    }
  }
</style>

<div class="container">
  <video class="video" src="video.mp4" controls></video>
  <div class="custom-div">
    <p>This is a custom div placed at the bottom of the video.</p>
  </div>
</div>