Link 产品图片库中的 YouTube 视频

Question

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

我希望在选择缩略图时播放 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="" />

Answer 1

您正在 <img> 标签中插入视频 link，这就是为什么它不起作用的原因。

一个解决方案可以将其插入到 iframe 中：

<iframe width="420" height="315"
  src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1">
</iframe>

希望对您有所帮助。

Answer 2

一定是因为SSL/TLS认证或者版权问题。网络上的每个视频都有一个嵌入代码。您必须复制它并粘贴到您的主 'div' 中。比如我有视频的嵌入代码：

<iframe width="854" height="480" src="https://www.youtube.com/embed/3R1ysTlxiVY" frameborder="0" allowfullscreen></iframe>

现在剪掉这个特定的部分，

src="https://www.youtube.com/embed/3R1ysTlxiVY"

并复制到你想要的容器中。现在，它不会包含在特定区域中，因为它被赋予了任何高度-宽度，因此您必须为此设置宽度-高度。在这种情况下，您可以附加整个 iframe。如果您不允许全屏，只需设置

allowfullscreen="0"

我希望这对你有用。

Answer 3

所以你在这里：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()。

享受改进此方法的乐趣。

Link 产品图片库中的 YouTube 视频

Link YouTube video in Product Image gallery

html

javascript

youtube

jquery