A space to discuss online store customization, theme development, and Liquid templating.
I'm trying to figure out how to reduce the size of the video and images when using the Video Section in the Dawn 2.0 theme. I've tried to change a few height and width values in the video-section.css and also in the video.liquid. I slightly understand the code in the video.liquid between the img src tag but I can't seem to figure out the exact component that allows me to control the size of the video or the fixed image. The snippet that I think has what I'm looking I copied below. Can anyway pinpoint me how to? Whenever I set an image and video URL for the Video Section, it makes it so big that it takes up almost my whole screen when I preview.
<div class="video-section__media"
{% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
>
<a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
{%- if section.settings.cover_image != blank -%}
<img
srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
{%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
{%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
{%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
{%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
{{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
src="{{ section.settings.cover_image | img_url: '1920x' }}"
sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
loading="lazy"
width="{{ section.settings.cover_image.width }}"
height="{{ section.settings.cover_image.height }}"
>