I want to upload video in my shopify store my code has for loop
<div class="product-slider-show">
<div class="owl-carousel">
{% for image in product.images %}
<div class="swiper-product-image">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: 'master' }}'" data-pos="{{ forloop.index }}">
<img {% if settings.lazyloading_enable %} class="lazyload" data-{% endif %}src="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}
</div>
</div>
When I add video html to this code, video shows up next to each pictures.
What code should I use in this for loop, so that the video can appear alone at the end?
if anyone else is having this problem. This code was my solution
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "768x" }}
{% endif %}
{% endfor %}