视频上的按钮叠加

Question

https://jsfiddle.net/3gve5cLo/

为什么第二个视频没有显示 gif？

.container2 {
  position: relative;
}

.container2 > .player-buttons1 {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 35px;
  left: 13%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 35px;
  z-index: 1;
}

.container2 > .player-buttons {

  height: 35px;
  left: 13%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 75%;
  width: 35px;
  z-index: 1;
}
.btn1 {
  color: var(--nav-text-color);
  font-weight: bold;
  width: 100px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 150ms ease-out;
  font-size: 8px;
}

.btn-open {
  background-color: #328fff;
  border-radius: 8px;
  margin: 0px; /* adjust as needed */
 padding: 0px; /* adjust as needed */
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 0 0 rgba(0, 0, 0, 0.3) inset;
}
.btn-open:hover {
  background-color: #4CAF50;
  color: white;
}

HTML 代码

      <ul id="autoWidth" class="cs-hidden">
        <li class="item-a" data-id="1">
          <div class="container2">
      <video autoplay muted loop playsinline id="video1" style="width:100%;margin:0 auto; height:100%;">

发现更多 http://google.com';">

现在的问题： CSS 在桌面视图中运行良好（得到我想要的，只是移动视图按钮未正确显示）按钮超出视频边框，使其无法正常显示

Answer 1

修复 HTML，它就会工作

您的 HTML 无效，并且播放器按钮不是 第二个例子

您在第二个示例中有两个播放器按钮，它们具有相同的偏移量。我删除了一个

.container2 {
  position: relative;
}

.container2 > .player-buttons {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 128px;
  left: 50%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 128px;
  z-index: 1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<ul id="autoWidth" class="cs-hidden">
  <li class="item-a" data-id="1">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
  <li class="item-b" data-id="2">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
</ul>

Answer 2

我修改了@mplungjan 的答案。我添加了媒体查询以在移动设备中正确显示按钮。见下sn-p

.container2 {
  position: relative;
}

.container2 > .player-buttons {
  background: url('https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif') center center;
  height: 128px;
  left: 50%;
  margin: -64px 0 0 -64px;
  position: absolute;
  top: 50%;
  width: 128px;
  z-index: 1;
}

@media (max-width: 520px) {
    .container2 > .player-buttons {
        width: 50px;
        height: 50px;
        left: 39%;
        top: 33%;
        margin: 0;
    }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<ul id="autoWidth" class="cs-hidden">
  <li class="item-a" data-id="1">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
  <li class="item-b" data-id="2">
    <div class="container2">
      <div class="embed-responsive embed-responsive-16by9 video-fluid"><iframe src="https://player.vimeo.com/video/193266260" width="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
      <div class="player-buttons" onclick="window.location='http://google.com';"></div>
    </div>
  </li>
</ul>