Ссылка на видео YouTube в галерее изображений продуктов

У меня возникла проблема размещения видео YouTube в галерее изображений продукта. В настоящее время у меня есть большое фото, поскольку основная фотография продукта и миниатюры меняют основную фотографию продукта. Например, на моем сайте here. Когда я пытаюсь разместить видео в приведенном ниже коде, я получаю сообщение об сломанном изображении.Ссылка на видео YouTube в галерее изображений продуктов

Я хочу, чтобы видеоролик 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="" />

источник

2015-10-02 FlexMarket

Это не работает, потому что тег изображения не может воспроизводить видео. Чтобы решить эту проблему, вы хотите использовать тег видео или лучше встроенный проигрыватель YouTube. – hyde

@hyde Спасибо за помощь! Я попробовал тег видео, и он просто помещает черный ящик в область миниатюр. Есть ли способ щелкнуть миниатюру видео и показать видео, где находится основная фотография продукта? Я прошу прощения за минимальную способность кодирования. – FlexMarket

Я напишу вам небольшой подход jQuery, который поможет вам в правильном направлении, скоро придет – hyde

Так вот вы: 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)

Это лишь небольшой скрипт, который изменяет содержимое HTML в .image по щелчку миниатюр. Поскольку jQuery уже включен на ваш сайт, я использовал его. Конечно, вы можете делать такие вещи с чистым JS (ванили). Надеюсь, вы получили базовую концепцию переключения содержимого с помощью jQuery.

С помощью этого фрагмента js у вас есть новый объект (contentToggle), доступный в глобальной области видимости. Этот объект содержит две функции addVideo() и addImage().

Удачи, улучшив этот подход.

источник

2015-10-02 17:02:05 hyde

PERFECT! Спасибо огромное! И большое прикосновение, поскольку я большой поклонник МГУ :) Я очень ценю помощь со всем этим. – FlexMarket

нет проблем, так как вы можете видеть, что я сбросил несколько ключевых слов, поэтому, если вам нравится больше узнать о js и jQuery, вам нужно начинать с – hyde

. Я заметил, что это отлично работает! Еще раз спасибо! Я очень ценю это! – FlexMarket

Вы вставляете ссылку на видео в <img> тега, так что это причина, почему Безразлично Не работай.

Решение может быть вставить его в IFRAME как:

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

Я надеюсь, что это помогает.

источник

2015-10-02 16:15:51 gon250

Это должно быть из-за сертификации 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"

Я надеюсь, что это может сработать для вас.

источник

2015-10-02 16:34:59

Ссылка на видео YouTube в галерее изображений продуктов

ответ

Смежные вопросы