Video is huge on my product page?

Highlighted
Trailblazer
245 1 51

I've got video displaying on my product pages but instead of neatly taking the place of a variant image, it's taking over the product page. Where can I add code to limit the size? 

https://leilacools.com/products/test?_pos=4&_sid=dd713bcdd&_ss=r&variant=32948297269323

Here is the code I have so far:

{% case media.media_type %}
{% when 'image' %}
{% 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 %}

<div id="{{ img_wrapper_id }}" class="product-single__image-wrapper supports-js{% unless featured_image == image %} hide{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} zoom-lightbox{% endif %}" data-image-id="{{ image.id }}">
<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__image lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
{% if featured_image == image %}src="{{ image | img_url: '300x300' }}"{% endif %}
data-src="{{ img_url }}"
data-widths="[180, 370, 540, 740, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}
alt="{{ image.alt | escape }}">
</div>
</div>

{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}

 

Thanks in advance for any help!

 

https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

 

 

0 Likes