Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Videos in Video Section too big on Dawn Theme

Videos in Video Section too big on Dawn Theme

TLD_admin
Tourist
4 0 3

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 }}"
>

Replies 0 (0)