javascript - 如何让这个视频在图像中显示/播放？

Question

我想知道如何让下面的代码工作。电视中有一个 youtube 视频，但我无法显示或播放它。我想知道解决这个问题的方法是什么？谢谢!

.tv {
    position: relative;
}


.tv img {
    position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  width: 550px;
}

.video {
position: absolute;
  top: 25px;
  left: 20px;
}

.b {
  width: 400px;
  height: 300px;
}

 <div class="tv">
  <img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
  
  <div class="video">
      <iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  </div>
</div>       
        
        
        

Answer 1

在iframe中使用如下代码

将 ?rel=0&autoplay=1&mute=1 添加到视频的 src 以自动播放:

<iframe class="b" src="https://www.youtube.com/embed/NJ_0Apc7r7A?rel=0&autoplay=1&mute=1"  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Working code

编辑您的评论!

I do not want autoplay. When I take autoplay off, the video will not play

使用z-index到 .video

Working code

如果您希望圆边用于视频:

.video {
position: absolute;
  top: 25px;
  left: 20px;
  z-index:10;
  border: 4px solid #000;
   border-radius: 15px;
}

Working code