Link YouTube video in Product Image gallery

Question

I am having an issue placing a YouTube video in my Product Image Gallery. Currently, I have a large photo as the main product photo and thumbnails change the main product photo. An example is on my website here. When I try to place a video in the code below, I get a broken image link.

I'd like for the YouTube video to play when the thumbnail is selected. If I could get some assistance with this, that would be great. Being new to coding has limited my ability in solving this problem.

Right now, this is a pure HTML solution and the code is below. I am open to javascript though if that is easier.

I appreciate any and all help with this! Thank you

HTML Main Product Photo

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

Thumbnails

<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

So here you are: 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)

It is just a small script which changes the html content of .image on click of the thumbnails. Because jQuery is already included to your website I used it. Of course you can do things like this with pure JS (vanilla). Hope you got the basic concept of switching contents with jQuery.

With this js snippet you have a new object (contentToggle) available at the global scope. This object contains two functions addVideo() and addImage().

Have fun improving this approach.

Answer 2

You are inserting a video link in a <img> tag, so it's the reason why doesn't work.

A solution could be insert it in a iframe as:

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

I hope it's helps.