Thêm nút phát vào hình ảnh css

.videos img {
  width:100%;
  height:auto;
}
a.video {
  float: left;
  position: relative;
}
a.video span {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url["../path-to-your-image/play-btn.png"] no-repeat;
  background-position: 50% 50%;
  background-size: 300%;
}
@media screen and [max-width: 480px] {
  a.video span {
    background-size: 400%;
  }
}

Đây là một bản demo với mã nguồn. demo nút phát video đáp ứng

Kỹ thuật 2 [phông chữ biểu tượng]

Sử dụng Phông chữ Tuyệt vời [hoặc bộ phông chữ biểu tượng khác] để hiển thị nút phát trên hình thu nhỏ video của bạn. Điều này có lợi thế là không phụ thuộc vào độ phân giải. Biểu tượng nút phát sẽ rõ ràng và sắc nét bất kể độ phân giải của thiết bị. Như với phương pháp ban đầu, giá đỡ nút phát sẽ được định vị tuyệt đối. Sử dụng. sau hoặc. trước bộ chọn phần tử giả để hiển thị biểu tượng nút phát

/* Just a parent container for the videos */
.videos {
  margin: 20px auto;
  max-width: 700px;
}
/* Individual video container */
.video-wrap {
  position: relative;
  max-width: 700px;
  width: 100%;
  margin-bottom: 10px;
}
.video-wrap .placeholder {
  max-width: 700px;
  width: 100%;
}
.video-wrap .play-btn {
  position: absolute;
  max-width: 700px;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  transform: translate[-50%, -50%];
  line-height: 1; /* needed if using Bootstrap */
  text-align: center;
  color: #eaeaea;
  background-color: rgba[255,255,255,.4];
  border-radius: 50px;
  transition: color, background-color .2s ease;
}
.video-wrap .play-btn:hover,
.video-wrap .play-btn:focus {
  color: #000;
  background-color: rgba[255,255,255,.8];
  cursor: pointer;
}
.play-btn::after {
  /*
  Font Awesome recommends these styles
  //fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
  */
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /*
  Define the font family, weight, and icon
  */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 60px;
  content: "\f04b";
  /* positioning tweaks */
  padding-top: 20px;
  padding-left: 10px;
}

Đây là bản demo của phương pháp phông chữ biểu tượng. Bản trình diễn nút phát phông chữ biểu tượng CSS

Kỹ thuật 3 [nút phát SVG]

Có lẽ cách dễ dàng hơn để thêm biểu tượng nút phát là sử dụng nút phát SVG. Bạn không phải tải thư viện phông chữ của bên thứ ba, điều này sẽ giúp giảm thời gian tải của bạn. Với SVG, bạn có quyền tự do tạo bất kỳ đồ họa nào bạn muốn và bạn có thể dễ dàng thay đổi màu sắc bằng thuộc tính 'fill'. Đối với bản trình diễn này, chúng tôi đang sử dụng cùng một kỹ thuật định vị tuyệt đối. Mã CSS theo sau, cũng như một liên kết đến bản demo nơi bạn có thể lấy mã SVG