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

编辑您的评论！

我不想自动播放。当我关闭自动播放功能时，视频不会玩

使用z-index到.video

Working code

如果要在视频上使用圆角：

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

Working code

Answer 2

此代码非常简单，只需一点CSS知识即可理解在这段代码中，我们在名为“ tv”的div标签中有一张图片，标签的位置为“ relative” 在代码中有一个“ iframe”代码段，我们可以将其添加到网站内的网站内容中。现在，在代码中放置“ iframe”之后，在CSS中将其命名为“ position：absolute”，这样做是为了将标记放置为子代“”，并且很容易识别位置电视上的电影带有“左上右上”的归属。

以下链接可以为您提供帮助：

positioning in css

iframe tag html

Answer 3

请移除位置：绝对；然后运行您的代码

Answer 4

问题在于电视的图像位于YouTube视频上方，因此存在一层阻止用户单击播放按钮的层。我建议通过将div class="video"添加到其CSS中来将z-index:11向前移动。

据我所知，除非静音，否则视频是no longer allowed to just auto-play。

如何使该视频在图像中显示/播放？

4 个答案: