Javascript 单击一个div将隐藏div并替换另一个div

我正在尝试创建一个视频播放器，如果你点击一个图像，它会将图像交换为youtube视频。代码运行良好，直到我想在顶部添加一个div作为播放器按钮

当然，现在那个按钮挡住了去路，无法识别点击事件。我怎么知道当你点击“播放”div时，它会隐藏该div并将另一个div图像替换为youtube视频

代码如下：

$(document).ready(function(){
    $('#play').click(function(){
        $('#play').hide();
        $('img').function () {
            video = '<iframe src="' + $(this).attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>';
            $(this).replaceWith(video);
    });
});

$（文档）.ready（函数（）{
$（“#播放”）。单击（函数（）{
$（“#播放”）.hide（）；
$（'img'）。函数（）{
视频=''；
$（此）.替换为（视频）；
});
});

我对jQuery还是个新手，不太了解布局和函数调用是如何工作的。你的见解真的很有帮助

谢谢：）

给你：

$（“#播放”）。在（'click'，函数（evt）上{
警报（“点击”）；
$（“#播放”）.hide（）；
$（'#img'）.hide（）；
$（'#video'）.html（''）；
});

HTML，请，也许在.Try$（'img'）.HTML（''）上有一个演示；这里有一个JS问题，这个想法是单击play div并将图片更改为YouTube irame，同时隐藏play div。当然要删除alert语句。我只想让你看到它正在触发。这对单个视频非常有效，但当我想要相同代码的视频时，它只在同一个视频上起作用第一个。当尝试更改为处理类而不是id时，它会完全混乱。我希望代码能够在被单击的div上独立工作，以便在单击该div之前，它确实会影响具有相同类/id的其他div。下面是我的示例。有人对此有很好的了解吗？一直在尝试，但似乎没有任何效果。它是just破坏了整个网站。

 $('#play').on('click', function(evt) {
         alert('click'); 
     $('#play').hide();
      $('#img').hide();
     $('#video').html('<iframe src="' + $('#video').attr('data-video') + '" width="100%" height="100%" frameborder="0"></iframe>');

 });