Video Background section leaves a blank space under it

Hey, so i added a video background section i found in a youtube video by editing my themes code. i know this is hard to understand so i attached pictures down below so you can see. so the section is working perfectly but the problem is the section leaves a blank space under it this happened after i added the section the code of the section is below:

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%}

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

 

{% if block.type == 'video' %}

 

{%- if block.settings.video_link != blank -%}

{% endif %}

 

{% if block.settings.title != blank %}

# 

{{ block.settings.title | escape }}

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% else %}

 

 

{% if block.settings.title != blank %}

# 

{{ block.settings.title | escape }}

{% endif %}

 

{%- style -%}

.videoBackground .imageBoxInfoDescription p {

color: {{ block.settings.color_text }}!important;

}

{%- endstyle -%}

 

{% if block.settings.text != blank %}

{{ block.settings.text }}

{% endif %}

 

{% if block.settings.button_link != blank and block.settings.button_label != blank %}

{{ block.settings.button_label | escape }}

{% endif %}

{% endif %}

{%- endfor -%}

 

{% else %}

This section doesn’t currently include any content. Add content to this section using the sidebar.

    

{%- endif -%}

 

 

{% schema %}

{

"name": {

"en": "Video Background"

},

"class": "videoBackground",

"max_blocks": 1,

"blocks": [

{

"type": "video",

"name": "Video",

"settings": [

{

"type": "url",

"id": "video_link",

"label": {

"en": "Video link"

}

},

{

"type": "image_picker",

"id": "video_image",

"label": {

"en": "Cover image"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"label": {

"en": "Heading"

},

"default": "Video slide"

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

},

{

"type": "image",

"name": "Image",

"settings": [

{

"type": "color",

"id": "color_bg",

"label": {

"en": "Background color (optional)"

},

"default": "#16165b"

},

{

"type": "image_picker",

"id": "image_bg",

"label": {

"en": "or use an image (required)"

}

},

{

"type": "range",

"id": "overlay_opacity",

"label": {

"en": "Overlay opacity"

},

"min": 0,

"max": 99,

"step": 1,

"unit": {

"en": "%"

},

"default": 0

},

{

"type": "header",

"content": {

"en": "Text"

}

},

{

"type": "text",

"id": "title",

"default": "Image slide",

"label": {

"en": "Heading"

}

},

{

"type": "richtext",

"id": "text",

"label": {

"en": "Description"

},

"default": {

"en": "

Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"

}

},

{

"type": "color",

"id": "color_text",

"label": {

"en": "Text color"

},

"default": "#ffffff"

},

{

"type": "text",

"id": "button_label",

"label": {

"en": "Button label"

}

},

{

"type": "url",

"id": "button_link",

"label": {

"en": "Button link"

}

},

{

"type": "color",

"id": "color_btn_bg",

"label": {

"en": "Background button color"

},

"default": "#ffffff"

},

{

"type": "color",

"id": "color_btn_text",

"label": {

"en": "Button text color"

},

"default": "#ffffff"

}

]

}

],

"presets": [

{

"name": {

"en": "Video Background"

},

"category": {

"en": "Main"

},

"blocks": [

{

"type": "video"

}

]

}

]

}

{% endschema %}

Hi @demoz1

{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

replace this line with

{%- assign img_url = block.settings.image -%}

didnt work

can you provide your store URL?

I have the exact same problem, any other solution?

I have the same issue and I cant figure where it comes from…

Have you had any luck? I have the same problem

Did you find a solution?

I have the same issue with no change when I replace the code

I found one, change this:

.videoBackground {
height: 100%;
position: relative;

to

.videoBackground

{ height: fit-content !important;

}