How to get custom code to stretch video from edge to edge

Store Design
, ,

Topic summary

A user needed help making a custom video section stretch edge-to-edge on their Shopify store (lejardinbridal.com). They had implemented custom code for a video section with text overlay and button, but the video appeared cropped and didn’t extend to the screen edges.

Troubleshooting process:

  • Initially identified that the video ratio matched the section, but appeared smaller due to the section’s width constraints
  • Attempted adjusting theme settings (Online store > Theme > Customize > Theme Settings > Layout) which improved the display but didn’t fully resolve the issue

Solution:
Adding custom CSS to the section resolved the problem:

.image-with-text {
  max-width: 100% !important;
  padding: 0px !important;
}

This code forces the section to full width and removes padding, allowing the video to display edge-to-edge as intended. The issue was successfully resolved.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

I found some in this amazing community posted a way to create a video section with word overlay and a working button. However my video when I upload it is cropped, it doesn’t go all the way to the edge of the screen. Can anyone help me edit this code that will help fill my video from edge to edge? My website is lejardinbridal.com

Here is the custom code that has created a new section:

{{ ‘component-image-with-text.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}

{%- endstyle -%}

.video-with-text .image-with-text__media video{ position: static!important; } .video-with-text .grid__item { width: 100%; max-width: none; } .image-with-text.video-with-text .image-with-text__text-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .image-with-text.video-with-text .image-with-text__content { background: rgba(0,0,0,0.5); color: #fff; } .image-with-text.video-with-text .image-with-text__content h2 { color: #fff;} .image-with-text.video-with-text .grid { position: relative; }
<div class="image-with-text__media gradient color-{{ section.settings.color_scheme }} global-media-settings {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"

{%- if section.settings.image != blank -%}

{%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}
{%- for block in section.blocks -%} {% case block.type %} {%- when 'heading' -%}

{{ block.settings.heading | escape }}

{%- when 'caption' -%}

{{ block.settings.caption | escape }}

{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'button' -%} {%- if block.settings.button_label != blank -%} {{ block.settings.button_label | escape }} {%- endif -%} {%- endcase -%} {%- endfor -%}

{% schema %}
{
“name”: “Video with text”,
“class”: “section”,
“settings”: [
{
“type”: “text”,
“id”: “image”,
“label”: “Video”
},

{
“type”: “select”,
“id”: “desktop_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.options__3.label”
}
],
“default”: “left”,
“label”: “t:sections.image-with-text.settings.desktop_content_alignment.label”
},

{
“type”: “header”,
“content”: “Mobile layout”
},
{
“type”: “select”,
“id”: “mobile_content_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__1.label”
},
{
“value”: “center”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__2.label”
},
{
“value”: “right”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.options__3.label”
}
],
“default”: “left”,
“label”: “t:sections.image-with-text.settings.mobile_content_alignment.label”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.image-with-text.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Image with text”,
“label”: “t:sections.image-with-text.blocks.heading.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
}
]
},
{
“type”: “caption”,
“name”: “t:sections.image-with-text.blocks.caption.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “caption”,
“default”: “Add a tagline”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “subtitle”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.options__1.label”
},
{
“value”: “caption-with-letter-spacing”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.options__2.label”
}
],
“default”: “caption-with-letter-spacing”,
“label”: “t:sections.image-with-text.blocks.caption.settings.text_style.label”
},
{
“type”: “select”,
“id”: “text_size”,
“options”: [
{
“value”: “small”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__1.label”
},
{
“value”: “medium”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__2.label”
},
{
“value”: “large”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.options__3.label”
}
],
“default”: “medium”,
“label”: “t:sections.image-with-text.blocks.caption.settings.caption_size.label”
}
]
},
{
“type”: “text”,
“name”: “t:sections.image-with-text.blocks.text.name”,
“limit”: 1,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“default”: “

Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

”,
“label”: “t:sections.image-with-text.blocks.text.settings.text.label”
},
{
“type”: “select”,
“id”: “text_style”,
“options”: [
{
“value”: “body”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.options__1.label”
},
{
“value”: “subtitle”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.options__2.label”
}
],
“default”: “body”,
“label”: “t:sections.image-with-text.blocks.text.settings.text_style.label”
}
]
},
{
“type”: “button”,
“name”: “t:sections.image-with-text.blocks.button.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.image-with-text.blocks.button.settings.button_label.label”,
“info”: “t:sections.image-with-text.blocks.button.settings.button_label.info”
},
{
“type”: “url”,
“id”: “button_link”,
“label”: “t:sections.image-with-text.blocks.button.settings.button_link.label”
}
]
}
],
“presets”: [
{
“name”: “Video with text”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “text”
},
{
“type”: “button”
}
]
}
]
}
{% endschema %}

2

Hi @mimiT

Could you share link that you added video to check?

3

Sure! this is the video link: https://cdn.shopify.com/videos/c/o/v/8ac97e637d5a4bb1a11883724bb8814c.mp4

4

Hi, I need the page link that you added that video section

5

oh sorry! it’s the homepage for my website: lejardinbridal.com

it’s the section that says featured collections.

6

Hi @mimiT

They are the same ratio. In featured collection, video smaller because of width that section

Screenshot 2023-09-22 at 09.56.38.png
Screenshot 2023-09-22 at 09.56.38.png1092×639 373 KB

Screenshot 2023-09-22 at 09.56.51.png
Screenshot 2023-09-22 at 09.56.51.png1985×1099 236 KB

7

Thank you! How can I make the section bigger so the video is wider and full size?

8

Hi @mimiT

You can try to change setting of your page with in Online store > Theme > Customize > Theme Settings > Layout

Screenshot 2023-09-22 at 10.10.47.png
Screenshot 2023-09-22 at 10.10.47.png1020×839 53 KB

9

Thank you for your help! I tried that and it made it better but it still didn’t bring it all the way to the edge.

10

Do you mean that section appear in full screen?

11

Yes!

12

Please add this code to Custom CSS of that section in your Online store > Themes > Customize

.image-with-text { max-with: 100% !important; padding: 0px !important; }
1 Like
13

Thank you so much! That fixed it! Thank you so much for your help! :grin:

1 Like
14

Happy I could help :blush: !