title: Images and videos in product slider on Shopify site
body: <p>I require some help in creating a product slider in Shopify that allows you to add images and videos. At the moment the slider is working fine but I am having issues adding product videos to the slider.</p>
  
  <p>From what I have read you can use the alt tag to add a YouTube embed code that will overwrite the image and display the video. I can get this working for the first image but it has a tenancy to break the rest of the slider. I believe I might need to change up the default slider and head with another alternative. </p>
  
  <p>Here is what I have so far</p>
  
  <pre><code>  $('#FeaturedImageZoom-product-template .product-featured-img').each (function() {
  
      var videoid = $(this).attr("alt");
      console.log(videoid);
  
      if ($('.product-featured-img').attr("alt") == videoid) {         
        $(this).replaceWith('&lt;iframe width="500px" height="500px" src="'+videoid+'?autoplay=1&amp;amp;showinfo=0&amp;amp;controls=0&amp;amp;modestbranding=1&amp;amp;rel=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;');
      } 
  
    });
  </code></pre>
  
  <p>And here is the liquid code to go with that:</p>
  
  <pre><code>&lt;div class="grid product-single"&gt;
  &lt;div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}"&gt;
    {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
    {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
    &lt;div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size &gt; 1 %} product-single__photo--has-thumbnails{% endif %}" {% if enable_zoom %}data-zoom="{{ featured_img_src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}&gt;
      &lt;img src="{{ featured_img_src | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}"&gt;
    &lt;/div&gt;
  
    {% if product.images.size &gt; 1 %}
      {% if product.images.size &gt; 3 %}
        {%- assign enable_thumbnail_slides = true -%}
      {% endif %}
  
      &lt;div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}"&gt;
        {% if enable_thumbnail_slides == true %}
          &lt;button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}"&gt;
            {% include 'icon-chevron-left' %}
            &lt;span class="icon__fallback-text"&gt;{{ 'sections.slideshow.previous_slide' | t }}&lt;/span&gt;
          &lt;/button&gt;
        {% endif %}
        &lt;ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}"&gt;
          {% for image in product.images %}
            &lt;li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item"&gt;
              &lt;a
                href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
                  class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                  {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}&gt;
                  &lt;img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}"&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          {% endfor %}
        &lt;/ul&gt;
        {% if enable_thumbnail_slides == true %}
          &lt;button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}"&gt;
            {% include 'icon-chevron-right' %}
            &lt;span class="icon__fallback-text"&gt;{{ 'sections.slideshow.next_slide' | t }}&lt;/span&gt;
          &lt;/button&gt;
        {% endif %}
      &lt;/div&gt;
    {% endif %}
  &lt;/div&gt;
  </code></pre>
  
  <p>I have read a couple of posts that outline a similar issue with developers trying to add a product videos however I have yet to come across a solution.</p>
  
  <p>If anyone can help out here that would be appreciated.</p>
  
  <p>Thanks</p>