My following codes provide to show html video between the product images. In the mobile view, the play button is located in the middle of the video. Do you think it is possible to do the same in desktop view?

<div class="owl-carousel">
{% 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 %}
</div>

What I want to see is ;