Images and videos in product slider on Shopify site

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.

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.

Here is what I have so far

  $('#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('<iframe width="500px" height="500px" src="'+videoid+'?autoplay=1&amp;showinfo=0&amp;controls=0&amp;modestbranding=1&amp;rel=0" frameborder="0" allowfullscreen></iframe>');
    } 

  });

And here is the liquid code to go with that:

<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
  {%- 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 -%}
  <div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 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 %}>
    <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 %}">
  </div>

  {% if product.images.size > 1 %}
    {% if product.images.size > 3 %}
      {%- assign enable_thumbnail_slides = true -%}
    {% endif %}

    <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
          {% include 'icon-chevron-left' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
        </button>
      {% endif %}
      <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
        {% for image in product.images %}
          <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
            <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 %}>
                <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
            </a>
          </li>
        {% endfor %}
      </ul>
      {% if enable_thumbnail_slides == true %}
        <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
          {% include 'icon-chevron-right' %}
          <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
        </button>
      {% endif %}
    </div>
  {% endif %}
</div>

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.

If anyone can help out here that would be appreciated.

Thanks