在产品图片库中关联YouTube视频

时间:2015-10-02 16:08:27

标签: javascript jquery html 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="" />

3 个答案:

答案 0 :(得分:2)

所以你在这里: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(香草)做这样的事情。 希望你有了用jQuery切换内容的基本概念。

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

乐于改进这种方法。

答案 1 :(得分:1)

您正在<img>标记中插入视频链接,这就是为什么它不起作用的原因。

解决方案可以将其插入iframe中:

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

我希望它有所帮助。

答案 2 :(得分:0)

必须是因为SSL / TLS认证或版权问题。网络上的每个视频都有一个嵌入代码。你必须将其复制并粘贴到主要的&#39;中。 就像我有一个视频的嵌入代码:

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

现在削减了这一特定部分,

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

并复制到您想要的容器中。现在,由于它具有任何高度宽度,因此不会包含在特定区域中,因此您必须为此设置width-height。在这种情况下,您可以附加整个iframe。如果您不允许全屏设置

allowfullscreen="0"

我希望这对你有用。