Video thumbnail not displaying in image carousel

[mel30]

Hello Experts,

The video thumbnail is not being displayed in the image carousel

{% assign featured_image = product.selected_or_first_available_variant.featured_image
  | default: product.featured_image
%}
<div class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
  <ul class="slides">
    {% for media in product.media %}
      {% if media.media_type == 'video' %}
        <li
          data-thumb="{{ image | product_img_url: '300x' }}"
          data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' or image.alt contains 'video'%}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}"
        >
          {% if image.alt contains 'youtube' or image.alt contains 'vimeo' or image.alt contains 'video' %}
            {% assign src=image.alt | split: 'src="' %}
            {% assign src=src[1] | split: '"' | first %}
          {% endif %}
          <div
            class="video__container {% if image.alt contains 'vimeo' %}vimeo{% elsif image.alt contains 'youtube'%}youtube{% else %}video{% endif %}"
            data-html5-video
          >
            {{ media | video_tag: image_size: '300x300', controls: true }}
          </div>

          {% if forloop.length == 1 and settings.thumbnail_position == 'no-thumbnails' %}
            <style>
              .product-{{ product.id }} .flex-direction-nav {
                display: none;
              }
            </style>
          {% endif %}
        </li>
      {% else %}
        <li
          data-thumb="{{ media.thumbnail_url | default: media | product_img_url: '300x' }}"
          data-title="{% if media.alt contains 'youtube' or media.alt contains 'vimeo' or media.media_type contains 'video' %}{{ product.title }}{% else %}{{ media.alt | escape }}{% endif %}"
        >
          <a
            href="{{ media.src }}"
            class="fancybox"
            data-fancybox-group="{{ product.id }}"
            title="{{ media.alt | escape }}"
          >
            <div class="image__container" style="max-width: {{ media.width }}px">
              <img
                src="{{ media.thumbnail_url | default: media | product_img_url: '300x' }}"
                alt="{{ media.alt | escape }}"
                class="lazyload lazyload--fade-in {% if featured_image.id == media.id %}featured_image{% endif %}"
                data-image-id="{{ media.id }}"
                data-index="{{ forloop.index0 }}"
                data-sizes="auto"
                data-srcset="
                  {{ media.thumbnail_url | default: media | product_img_url: '2048x' }} 2048w,
                  {{ media.thumbnail_url | default: media | product_img_url: '1900x' }} 1900w,
                  {{ media.thumbnail_url | default: media | product_img_url: '1600x' }} 1600w,
                  {{ media.thumbnail_url | default: media | product_img_url: '1200x' }} 1200w,
                  {{ media.thumbnail_url | default: media | product_img_url: '1000x' }} 1000w,
                  {{ media.thumbnail_url | default: media | product_img_url: '800x' }} 800w,
                  {{ media.thumbnail_url | default: media | product_img_url: '600x' }} 600w,
                  {{ media.thumbnail_url | default: media | product_img_url: '400x' }} 400w
                "
                data-src="{{ media.thumbnail_url | default: media | product_img_url: '2048x' }}"
              >
            </div>
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
</div>

What could be the issue?

Thank you for your support