如何将视频和图片放在同一位置？

Question

在这里您可以看到两个圆圈分开站立，如何将它们放置在同一位置

此处为两个圆圈的css代码，分别为position:relative类和.player分别表示.player__video和player1和player2的绝对值，但没有改变

.player {
  position: relative;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .player {
    overflow: hidden;
  }
}
.player1{
  position: absolute;
  text-align: center;
  cursor: pointer;
  width: 100%;
  height: 100%;  
}
.player__video {
  overflow: hidden;
  max-width: 100%;
  position: relative;
  vertical-align: top;
  height: 100%;
  width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 600px){
    .player__video{
        display:none;
    }  
}
.player2
{
  overflow: absolute;
  max-width: 100%;
  position: absolute;
  vertical-align: top;
  height: 100%;
  width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 768px) {
  .player__video, .player2 {
    border-radius: 50%;
  }
}
.player__video{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 100%;
    position: relative;     
}
.player2 {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    max-height: 100%;
 }

该代码应更改什么？

此处是html代码：

<div class="hero__player">
    <div class="player">
        <video class="player__video" width="506" height="506" muted preload="auto">
           <source src="[xfvalue_videopath]" type="video/mp4">
              Your browser does not support the video tag.
        </video>
        <div class= "player1">
            <img class="player2" src=[xfvalue_videopathimage] width="506" height="506">
        </div>
    </div>
 </div>

在HTML代码中，我创建了一个player类，在其中有两个类负责图片和视频

Answer 1

只需隐藏隐藏在CSS中

.player2
{
  overflow: hidden;
  max-width: 100%;
  position: absolute;
  vertical-align: top;
  height: 100%;
  width: 100%;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

Answer 2

您可以使用postition: absolute

将它们彼此叠放

img {
  position: absolute;
}

/* Places the last image a off to show they are on top of each other */
img:nth-child(2) {
  left: 20px;
  top: 20px;
}

<img src="https://placekitten.com/400/400" alt="">
<img src="https://placekitten.com/400/400" alt="">

您可以使用z-index允许点击到达播放器按钮。

希望这会有所帮助。

JSFiddle example