切换嵌入式Vimeo视频的源，单击缩略图图像

Question

我有一个iframe用于在转轮菜单的div中嵌入Vimeo video。菜单下方有2个视频缩略图。缩略图由图像和叠加播放按钮图像组成（我使用z-index将其放在顶部）。我为叠加播放按钮图片添加了id，我在click事件中将其定位为更改iframe中的视频源。 （请务必点击轮播菜单中的Galleria video，以便能够看到屏幕截图中显示的内容。）

我使用了JQuery，我尝试了两种方法：

第一种方法： 我试图替换iframe

中div的整个 html

<script>
    $(function() {
    $("#playbutton, #playbutton2").on("click", function(e) {
        var videoplayer = "";
        switch ($(this).prop("id")) {
            case "playbutton":
                videoplayer = '<iframe src="//player.vimeo.com/video/87204743" width="577" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
                break;
            case "playbutton2":
                videoplayer = '<iframe src="//player.vimeo.com/video/87198074" width="577" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
                break;
                }
            $("#video-vimeo").html(videoplayer);
            return false;
    })
})
</script>

#playbutton和playbutton2是缩略图的叠加播放按钮的ID。 videoplayer是我用来存储html代码的变量。 #video-vimeo是包含嵌入视频的ID的{​​{1}}。

有关实时页面的信息，请参阅here（JQuery代码位于html页面的末尾）。

第二种方法：我尝试仅替换div

中iframe的 src 属性的值

div

<script> $(function() { $("#playbutton, #playbutton2").on("click", function(e) { var videoplayer = ""; switch ($(this).prop("id")) { case "playbutton": alert("video1"); videoplayer = "//player.vimeo.com/video/87204743"; break; case "playbutton2": alert("video2"); videoplayer = "//player.vimeo.com/video/87198074"; break; } $("#video-iframe").attr("src", videoplayer); return false; }) }) </script> 这是我要定位的#video-iframe的 ID 。

有关实时页面的信息，请参阅here（JQuery代码位于html页面的末尾）。

---

我认为我的想法应该是好的，但它不起作用，目前我看不出错误。我希望你能帮助我解决问题，如果你有更好的想法，请随时告诉我。