Javascript 在模式弹出窗口中播放嵌入的YouTube视频？

当用户点击YouTube视频时，是否有可能在模式弹出窗口中播放已嵌入网站的YouTube视频

---

视频是使用YouTube的嵌入代码嵌入的，下面是一个示例：

<iframe width="560" height="315" src="https://www.youtube.com/embed/iRYDYrj3Bfw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

我看过几个将YouTube视频加载到模式弹出窗口的脚本，例如：

但到目前为止，它们都是通过按钮或横幅来实现的

我希望这会像做这样的事情一样简单：

<div id="wrapper">
<youtube iframe></iframe>
</div>

然后在javascript中，听一下包装器上的点击

---

我想模拟以下网站的行为，您可能需要向下滚动到名为Arbeiten的部分并单击其中一个视频：

根据Ingus的解决方案，您可以像我在这里做的那样在iframe上覆盖一个div：

$document.readyfunction{ AutoPlayYouTubemold； }; 函数autoplayyoutubemold{ 变量触发器=$'。触发器'； trigger.clickfunction{ e、 防止违约； var theModal=$this.datatarget； var videoSRC=$this.attrsrc； var videoSRCauto=videoSRC+？自动播放=1； $theModal+'iframe'.attr'src'，videoSRCauto； $theModal.on'hidden.bs.modal'，函数E{ $theModal+'iframe'.attr'src'； }; }; }; .持有人{ 宽度：560； 高度：315px； 位置：相对位置； } .框架{ 宽度：100%； 身高：100%； } .覆盖{ 位置：绝对位置； 排名：0； 左：0； 宽度：560%； 高度：315px； 光标：指针； } &时代；

---

根据Ingus的解决方案，您可以像我在这里所做的那样在iframe上覆盖一个div：

$document.readyfunction{ AutoPlayYouTubemold； }; 函数autoplayyoutubemold{ 变量触发器=$'。触发器'； trigger.clickfunction{ e、 防止违约； var theModal=$this.datatarget； var videoSRC=$this.attrsrc； var videoSRCauto=videoSRC+？自动播放=1； $theModal+'iframe'.attr'src'，videoSRCauto； $theModal.on'hidden.bs.modal'，函数E{ $theModal+'iframe'.attr'src'； }; }; }; .持有人{ 宽度：560； 高度：315px； 位置：相对位置； } .框架{ 宽度：100%； 身高：100%； } .覆盖{ 位置：绝对位置； 排名：0； 左：0； 宽度：560%； 高度：315px； 光标：指针； } &时代；

---

我将下面的示例用于引导3/4。这对我有用

在youtube上播放视频片段

<img src="https://img.youtube.com/vi/<?= $row['videoID'] ?>/mqdefault.jpg" class="video-btn img-fluid cursor-pointer" data-toggle="modal" data-src="https://www.youtube.com/embed/<?= $row['videoID'] ?>" data-target="#myModal">

---

我将下面的示例用于引导3/4。这对我有用

在youtube上播放视频片段

<img src="https://img.youtube.com/vi/<?= $row['videoID'] ?>/mqdefault.jpg" class="video-btn img-fluid cursor-pointer" data-toggle="modal" data-src="https://www.youtube.com/embed/<?= $row['videoID'] ?>" data-target="#myModal">

---

这可能对你有用：P谢谢你。但在这个例子中，他们使用页面上的按钮来启动模态。想知道这是否可以通过已经嵌入的youtube视频实现-如果我理解你的意思是正确的，那么你应该用你想要的任何东西来替换按钮。例如，视频是使用youtube上的iframe嵌入的。当有人点击播放按钮时，我希望视频在弹出窗口中播放。这可能对你有用：P谢谢。但在这个例子中，他们使用页面上的按钮来启动模态。想知道这是否可以通过已经嵌入的youtube视频实现-如果我理解你的意思是正确的，那么你应该用你想要的任何东西来替换按钮。例如，视频是使用youtube上的iframe嵌入的。当有人点击“播放”按钮时，我希望视频在弹出窗口中播放。感谢这一点，同时我整理了我自己的解决方案，我从网上找到的各种片段中复制了这些解决方案。在你的情况下，视频自动播放与声音在我的情况下，我不能让它自动播放，除非我附加&mute=1的网址。我不明白为什么。谢谢你，在此期间，我整理了我自己的解决方案，我从网上找到的各种片段中复制了这些解决方案。在你的情况下，视频自动播放与声音在我的情况下，我不能让它自动播放，除非我附加&mute=1的网址。我不明白为什么。

<script type="text/javascript">
    //for youtube video modal
$(document).ready(function() {
      var $videoSrc;  
      $('.video-btn').click(function() {
          $videoSrc = $(this).data( "src" );
      });
      console.log($videoSrc);
      $('#myModal').on('shown.bs.modal', function (e) {
      $("#video").attr('src',$videoSrc + "?rel=0&amp;showinfo=0&amp;modestbranding=1&amp;autoplay=1" ); 
      })
      $('#myModal').on('hide.bs.modal', function (e) {
          $("#video").attr('src',$videoSrc); 
      })
});
</script>

.videomodal .modal-dialog {
      max-width: 800px;
      margin: 30px auto;
  }    
.videomodal .modal-body {
  position:relative;
  padding:0px;
}
.videomodal .close {
  position:absolute;
  right:-30px;
  top:0;
  z-index:999;
  font-size:2rem;
  font-weight: normal;
  color:#fff;
  opacity:1;
}
.cursor-pointer{
    cursor: pointer;
}