javascript - 在产品图片库中链接YouTube视频

将YouTube视频放入“产品图片库”时遇到问题。目前，我有一张大照片作为主要产品照片，缩略图更改了主要产品照片。我的网站here上有一个例子。当我尝试在下面的代码中放置视频时，出现了损坏的图像链接。

我希望选择缩略图后才能播放YouTube视频。如果我可以得到一些帮助，那就太好了。编码新手限制了我解决此问题的能力。

现在，这是一个纯HTML解决方案，下面是代码。我愿意使用javascript，尽管这样比较容易。

感谢您提供的所有帮助!谢谢

HTML主要产品图片

<div class="image"><img name="preview" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt=""/></div>

缩略图

<div class="thumbnails">
<img onclick="preview.src=img1.src" name="img1" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/hsl7.jpg" alt="" /><img onclick="preview.src=img2.src" name="img2" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/end.jpg" alt="" /><img onclick="preview.src=img3.src" name="img3" src="http://firesuppressiontech.com/wp-content/uploads/2015/08/lhsl.png" alt="" /><img onclick="preview.src=img4.src" name="img4" src="https://www.youtube.com/watch?v=TTiEz5j48x4" alt="" />

最佳答案

所以您在这里:Working Fiddle

(function ($, w) {
    w.contentToggle = {
        addVideo: function (videoId) {
            $('.image').html('<iframe width="640" height="360" src="https://www.youtube.com/embed/' + videoId +'?rel=0&amp;autoplay=1&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>');
        },
        addImage: function (imageSrc) {
            $('.image').html('<img name="preview" src="' + imageSrc + '" alt=""/>');
        }
    };
})(jQuery, window)

这只是一个小脚本，单击缩略图即可更改.image的html内容。因为jQuery已经包含在您的网站中，所以我使用了它。当然，您可以使用纯JS( Vanilla )做类似的事情。
希望您了解使用jQuery切换内容的基本概念。

使用此js代码段，您可以在全局范围内使用一个新对象(contentToggle)。该对象包含两个函数addVideo()和addImage()。

乐于改进这种方法。