Javascript 如何获取隐藏时显示的iframe？

我有一个图像，我想让用户看到。当用户点击这个图像时，我希望图像消失，并在它的位置显示视频。有人能告诉我怎么做吗

这是我到目前为止的代码

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <a href="#">
         <img src="../../../upload/1/img/video.jpg" style="display:none" />
    </a>

    <div id="video" style="display:inline">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

如果有人可以编辑我的帖子来清理代码，那就太好了。我想不出来

要稍微描述一下代码： 这就是我点击图片后代码的样子。当您第一次看到该页面时，两种显示样式将颠倒

任何帮助都会很棒

---

谢谢

一般的想法可以是这样的：

$(function() {
  $("img").click(function() {
   $(this).css("display","none");  // will hide your image
   $("body").append("<div id='video'></div>");   // will append div with id video, this div should have video code inside this.
});
});

$（函数（）{
$（“img”）。单击（函数（）{
$（this）.css（“display”，“none”）；//将隐藏您的图像
$（“body”）.append（“”；//将使用id video追加div，此div中应包含视频代码。
});
});

您希望在开始时隐藏视频，因此将其设置为样式

display:none

。您还希望为缩略图提供一个

id

，以便在jQuery中引用它。您还可以从图像周围移除

标记（不需要）

HTML

如果可以的话，我也会尽量避免内联添加CSS样式

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <img id="thumbnail" src="../../../upload/1/img/video.jpg" />

    <div id="video" style="display:none">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

$(document).ready(function(){
    $("#thumbnail").click(function(){
        $(this).hide()
        $("#video").show()
    })
})