如何在 HTML 和 CSS 中添加视频作为按钮背景？

Question

我尝试在 css 中使用

background-image

作为按钮背景，但这仅适用于图像，不适用于视频。那么，有没有办法把视频作为按钮的背景呢？我正在尝试制作一个以循环静音视频作为背景的按钮。

Answer 1

一种方法是在充当按钮的容器内使用 HTML5 元素和绝对定位。将“your-video-file.mp4”替换为您的视频文件的路径。

  .button-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  
  .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This prevents the video from capturing clicks */
  }

  .button {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 10px 20px;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 5px;
    color: #333;
    font-size: 16px;
    cursor: pointer;
    outline: none;
  }

<div class="button-container">
  <video class="video-background" autoplay muted loop>
    <source src="https://youtu.be/u31qwQUeGuM?si=UKidIYaF95RiWpEk" type="video/mp4">
    <!-- Add more source tags for different video formats if needed -->
    Your browser does not support the video tag.
  </video>
  <button class="button">Your Button Text</button>
</div>