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

Question

在这里你可以看到两个圆圈分开站立，我怎样才能把它们放在同一个位置

这里两个圆圈的css代码，分别表示position:relativeclass .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类，里面有两个类，分别负责图片和视频

标签： htmlcss

Answer 1

您可以将它们放在彼此之上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 示例