Jquery 通过单击覆盖图像播放youtube视频

我希望有一个覆盖图像，显示在一个YouTube视频，我想要的是点击覆盖图像，然后将被删除，视频将开始播放

这是我的html：

<div class="video-panel">
    <div class="overlay"></div>
    <div class="video"><?php echo $video; ?></div>
</div>

---

我知道将需要jquery，但我不知道如何让它工作？

您可以执行以下操作：

// video gallery play on click
    $('div.videoWrapper').click(function(){
    video = '<iframe src="'+ $(this).attr('data-video') +'"></iframe>';
    $(this).html(video);
});

//单击即可播放视频库
$（'div.videoWrapper'）。单击（函数（）{
视频=''；
$（this.html（视频）；
});

HTML:

<div class="videoWrapper videoOnClick t-hidden m-hidden" data-video="https://www.youtube.com/embed/Jy6rdnYSh74?list={your-video-id}?&amp;autoplay=1">
  <span class="play-icon"></span>
  <img class="video-overlay" src="images/video-overlay.png">
</div>

添加不带括号的视频id

---

这在手机和平板电脑上不起作用。只能在台式机或笔记本电脑上使用

有没有办法让它不是一个iframe？我正在嵌入一个视频，这样它就已经有了一个iframe附加到它了？不是真的。我对它做了大量的研究。如果你找到了解决办法，也请告诉我。记住，分享就是关心DI发现了基本上我想要的东西，但它是从2009年开始的，所以很老了。大学教师；I don’我不知道这是否有用。对你有用的东西都是好的。我发布的答案对我来说很有用。尝试两种解决方案。祝你一切顺利。

<div class="videoWrapper videoOnClick t-hidden m-hidden" data-video="https://www.youtube.com/embed/Jy6rdnYSh74?list={your-video-id}?&amp;autoplay=1">
  <span class="play-icon"></span>
  <img class="video-overlay" src="images/video-overlay.png">
</div>