How to display product videos on product pages?

My product-template.liquid template is currently set up to only show product images. I’ve uploaded a video and would like to display it when you click on it.

I figured out how to show media thumbnails, but when I click the thumbnails, they don’t appear as large images/videos like they’re supposed to.

Here is my original code:


    

    {% for image in product.images %}
        - 
    {% endfor %}
    

    {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

    {% for image in product.images %}
    {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
    {% capture img_wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
    {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
    {% include 'image-style' with image: image, small_style: false, width: 700, height: 1024, wrapper_id: img_wrapper_id, img_id: img_id %}

    

        

        
        

    

    {% else %}
    
    {% endfor %}

    

It needs some advance level custom coding