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

【问题标题】：How to get this video to show/play in the image?如何让这个视频在图像中显示/播放？
【发布时间】：2019-05-01 04:08:33
【问题描述】：

我想知道如何使以下代码工作。电视中有一个 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>

【问题讨论】：

标签： javascript html css video embed

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

在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

【讨论】：

我不想自动播放。当我关闭自动播放时，视频将无法播放
谢谢！唯一的问题是它不适用于移动视图？
在移动设备视图中，视频太大，超出了电视图像。
使用media-query在手机中设置其他宽度/高度：w3schools.com/cssref/css3_pr_mediaquery.asp

【解决方案3】：

请删除位置：绝对；然后运行你的代码

【讨论】：

当我删除它时，视频不再在电视图像中。
然后你删除它然后最小化视频大小并调整 z-index 值

【解决方案4】：

这段代码非常简单易懂，只需一点 CSS 知识在这段代码中，我们在名为“tv”的 div 标签中有一张图片，标签的位置为“relative” 代码中有一个“iframe”代码sn-p，我们可以将其添加到站点内站点的内容中。现在我们在代码中放置了“iframe”之后，我们在CSS中给它“position:absolute”，这样做是为了让标签被放置为子“”并且很容易识别位置带有“左上右上”属性的电视上的电影。

以下链接可以帮助您：

positioning in css

iframe tag html

【讨论】：