Javascript 单击图像以显示视频

我在图库中有一些缩略图，当用户单击它们时，我希望它在预览框中显示视频。我已经将javascript设置为在预览框中显示图像，因为我的图库中有两个部分-图像和视频

我是否也可以用javascript复制视频图像的函数？我知道我也需要嵌入视频，但我不确定将它们放在HTML中的什么位置，因为我只希望在单击缩略图图像时，它们显示在预览框中

注: 我试图把它放在一把小提琴，但它很难与破碎的图像链接

这是我的密码：

HTML

JAVASCRIPT

function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
}

---

我会这样做：

在每个标签周围放置 为视频设置目标iframe 命名作为目标的iframe 例如：

您的视频应在目标设置的iframe中播放

---

顺便说一句，如果您为每个图像保留相同的id，您将有一些html错误使用验证器跟踪这些错误…我将提出一个一致的命名系统。例如，每个图像都连续编号以匹配文件名。让id=selectimg1对应于image1.png，id=selectimage2对应于image2.png，等等。

那么您建议将此作为javascript的替代方案？我正在寻找javascript解决方案，很抱歉，这是youtube视频还是您将自己主持的视频？可能是重复的

    #display{
    margin: 0 auto;
    height:468px;
    width:627px;
    padding-top:37px;
}

#display img{
    height:100%;
    width:100%; 
}

.select{
    padding-top:78px;

}

.select img{
    width:146px;
}

.galleryrow {
    display:block;
}

.videosection {
    float:left;
    margin-left:30px;
}

.imagesection {
    float:left;
}

function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
}

<iframe name="iframe1" class="myClass"></iframe>
<a href="http://www.youtube.com/embed/myVideo1" target="iframe1"><img id="selectimg" src="../assets/images/gallery/image1.png"></a>