Video thumbnail not displaying in image carousel

Question

I have added a video on the admin page of a product. Initially the video was not being displayed.

Figured out to display the video. but in the image carousel the video thumbnail does not display it shows no image

can you'll tell what is wrong or how it can be displayed.

{% 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
          {% if media.media_type contains 'video' %}
            video
          {% endif %}
          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>

Thank you for your support