diff --git a/sections/video.liquid b/sections/video.liquid index 766caf1a33d..36cd223a2e0 100644 --- a/sections/video.liquid +++ b/sections/video.liquid @@ -30,23 +30,14 @@ > {%- if section.settings.cover_image != blank -%} - {{ 'sections.video.load_video' | t: description: section.settings.description | escape }} + {% capture 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 %}{% endcapture %} + {% assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape %} + {{ section.settings.cover_image | image_url: width: 3840 | image_tag: + loading: 'lazy', + sizes: sizes, + widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', + alt: alt + }} {%- else -%} {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%} @@ -63,23 +54,14 @@ aria-label="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}" > {%- if section.settings.cover_image != blank -%} - {{ 'sections.video.load_video' | t: description: section.settings.description | escape }} + {% capture 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 %}{% endcapture %} + {% assign alt = 'sections.video.load_video' | t: description: section.settings.description | escape %} + {{ section.settings.cover_image | image_url: width: 3840 | image_tag: + loading: 'lazy', + sizes: sizes, + widths: '375, 750, 1100, 1500, 1780, 2000, 3000, 3840', + alt: alt + }} {%- else -%} {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}