making a background video link to my product page

[teenagefeelings]

im trying to make my background video link to my products but it wont let me add any sections/ blocks to the background video. pls help!

here is the code

{%- 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' %}

<div class="videoBox" style="{%- if block.settings.video_link == blank -%}background-image: url('{{ block.settings.video_image  | img_url: 'master' }}');{%- endif -%}">

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

<div class="fullscreen-video-wrap">

<video class="video-js" loop autoplay preload="none" muted playsinline

poster="https:{{ block.settings.video_image | img_url: 'master' }}">

<source src="{{ block.settings.video_link }}" type="video/mp4">

</video>

</div>

{% endif %}

<div class="videoBoxInfo">

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

<h1 class="videoBoxInfoTitle">

{{ block.settings.title | escape }}

</h1>

{% endif %}

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

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

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

<a href="{{ block.settings.button_link }}" class="videoBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% else %}

<div class="imageBox" style="background-color: {{ block.settings.color_bg }}; {%- if block.settings.image_bg != blank -%}background-image: url('{{ block.settings.image_bg | img_url: 'master' }}');{%- endif -%}">

<div class="imageBoxInfo">

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

<h1 class="imageBoxInfoTitle" style="color: {{ block.settings.color_text }}">

{{ block.settings.title | escape }}

</h1>

{% endif %}

{%- style -%}

.videoBackground .imageBoxInfoDescription p {color: {{ block.settings.color_text }}!important;}

{%- endstyle -%}

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

<div class="imageBoxInfoDescription" id="{{ block.id }}" style="color: {{ block.settings.color_text }}">

{{ block.settings.text }}

</div>

{% endif %}

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

<a href="{{ block.settings.button_link }}" class="imageBoxInfoBtn" style="color: {{ block.settings.color_btn_text }}; background: {{ block.settings.color_btn_bg }}">

{{ block.settings.button_label | escape }}

</a>

{% endif %}

</div>

</div>

{% endif %}

{%- endfor -%}

{% else %}

<div class="placeholderNoblocks">

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

</div>

{%- endif -%}

<style>

.main-content .videoBackground {margin-top: -55px;}

.videoBackground {position: relative;}

.videoBackground .fullscreen-video-wrap {position: absolute;top: 0;left: 0;min-width: 100%;width: 100%;height: 100%;overflow: hidden;}

.videoBackground .fullscreen-video-wrap .video-js {position: absolute;top: 0;left: 0;min-height: 100%;min-width: 100%;width: 100%;height: 100%;object-fit: cover;}

.videoBackground .fullscreen-video-wrap video {min-height: 100%;min-width: 100%;object-fit: cover;}

.videoBackground .videoBox {display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 100px 20px 80px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;}

.videoBackground .imageBox {display: flex;align-items: center;justify-content: flex-end;flex-direction: column;padding: 100px 20px 80px;background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;}

.videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {z-index: 2;margin: auto;text-align: center;}

.videoBackground .overlay {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;background: #000;z-index: 1;}

.videoBackground .videoBoxInfoBtn, .videoBackground .imageBoxInfoBtn {-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;display: inline-block;width: auto;text-decoration: none;text-align: center;vertical-align: middle;cursor: pointer;border: 1px solid transparent;border-radius: 2px;padding: 10px 30px;font-style: normal;font-weight: normal;letter-spacing: 0.06em;white-space: normal;font-size: 16px;margin-top: 20px;}

.videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle {color: #FFF;font-size: 65px;line-height: 40px;}

.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {max-width: 500px;margin: 0 auto;}

.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {font-size: 17px;line-height: 28px;}

.videoBackground .placeholderNoblocks {text-align: center;max-width: 500px;margin: 0 auto;}

@media screen and (max-width: 767px) {

  .main-content .videoBackground {margin-top: -35px;}

  .videoBackground .fullscreen-video-wrap {z-index: 3;}

  .videoBackground .videoBox {min-height: 300px;height: 100%;position: relative;padding: 0;}

  .videoBackground .fullscreen-video-wrap {min-height: 300px;z-index: -2;}

  .videoBackground .videoBoxInfo {padding: 2px 20px;width: 100%;}

}

  {% for block in section.blocks %}

    {% unless block.settings.fullscreen == true %}

      .videoBackground .videoBox ,.videoBackground .imageBox {padding: 100px 20px 80px;height:calc({{block.settings.desktop_height}}px - 123px);} 

    {% else %}

      .videoBackground .videoBox ,.videoBackground .imageBox {padding: 100px 20px 80px;height:calc(100vh - 123px);}       

    {% endunless %}

    .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo{padding:{{block.settings.desk_padding}}px;background:{{block.settings.desktop_title_bg}};}

      .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle{font-size:{{block.settings.desktop_title}}px;line-height:initial;color:{{block.settings.desktop_title_color}};margin:0;margin-bottom:{{block.settings.desk_margin}}px;}

      .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription{max-width:{{block.settings.des_width}}px;margin:0 auto;}

      .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p{font-size:{{block.settings.desktop_des}}px;line-height:initial;color:{{block.settings.desktop_des_color}};margin:0;}

    @media screen and (max-width: 767px) {

      {% unless block.settings.fullscreen == true %}

        .videoBackground .videoBox ,.videoBackground .imageBox {padding:{{block.settings.block_mobile_margin}}px;height:calc({{block.settings.mobile_height}}px - 100px);} 

      {% else %}

        .videoBackground .videoBox ,.videoBackground .imageBox {padding:{{block.settings.block_mobile_margin}}px;height:calc(100vh - 100px);}       

      {% endunless %}

    .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo{padding:{{block.settings.mobile_padding}}px;background:{{block.settings.mobile_des_bg}};}

      .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle{font-size:{{block.settings.mobile_title}}px;line-height:initial;color:{{block.settings.mobile_title_color}};margin-bottom:{{block.settings.mobile_margin}}px;}

    .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p{font-size:{{block.settings.mobile_des}}px;line-height:initial;color:{{block.settings.mobile_des_color}};margin:0;}

    }

  {% endfor %}

</style>

{% schema %}

{

  "name": {

    "en": "Video Background"

  },

  "class": "videoBackground",

  "max_blocks": 1,

  "blocks": [

    {

    "type": "video",

    "name": "Video",

      "settings": [

        {

          "type":"checkbox",

          "id":"fullscreen",

          "label":"Check to make video/image full screen height"

        },

         {

          "type": "range",

          "id": "desktop_height",

          "min": 300,

          "max": 1200,

          "step": 100,

          "unit": "px",

          "label": "Desktop Height",

          "default": 500

        },

        {

          "type": "range",

          "id": "mobile_height",

          "min": 300,

          "max": 1200,

          "step": 100,

          "unit": "px",

          "label": "Mobile Height",

          "default": 500

        },

        {

      "type": "url",

      "id": "video_link",

      "label": {

      "en": "Video Link"

      }

      },

      {

      "type": "image_picker",

      "id": "video_image",

      "label": {

      "en": "Cover Image"

      }

      },

      {

      "type": "header",

      "content": {

      "en": "Text"

      }

      },

      {

      "type": "text",

      "id": "title",

      "label": {

      "en": "Heading"

      },

      "default": "Video slide"

      },

      {

        "type": "range",

        "id": "desktop_title",

        "min": 30,

        "max": 200,

        "step": 5,

        "unit": "px",

        "label": "Title Desktop Font Size",

        "default": 60

      },

       {

        "type":"color",

        "id":"desktop_title_color",

        "label":"Desktop Title Color"

      },

      {

        "type": "range",

        "id": "mobile_title",

        "min": 30,

        "max": 150,

        "step": 5,

        "unit": "px",

        "label": "Mobile Title Font Size",

        "default": 60

      },

      {

          "type":"color",

          "id":"mobile_title_color",

          "label":"Mobile Title Color"

        },

         {

          "type":"color",

          "id":"desktop_title_bg",

          "label":"Desktop Background Color"

        },

        {

          "type":"range",

          "id":"desk_margin",

          "min":0,

          "max":60,

          "step":5,

          "unit":"px",

          "default":0,

          "label":"Desktop space between title & description"

        },

        {

          "type":"range",

          "id":"mobile_margin",

          "min":0,

          "max":60,

          "step":5,

          "unit":"px",

          "default":0,

          "label":"Mobile space between title & description"

        },

        {

          "type":"range",

          "id":"desk_padding",

          "min":0,

          "max":60,

          "step":5,

          "unit":"px",

          "default":0,

          "label":"Desktop Padding"

        },

        {

      "type": "richtext",

      "id": "text",

      "label": {

      "en": "Description"

      },

      "default": {

      "en": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

      }

      },

        {

          "type":"range",

          "id":"des_width",

          "min":400,

          "max":900,

          "step":100,

          "unit":"px",

          "default":500,

          "label":"Select maximum width for description"

        },

         {

        "type": "range",

        "id": "desktop_des",

        "min": 10,

        "max": 150,

        "step": 5,

        "unit": "px",

        "label": "Desktop description font size",

        "default": 60

      },

       {

        "type":"color",

        "id":"desktop_des_color",

        "label":"Desktop description color"

      },

      {

        "type": "range",

        "id": "mobile_des",

        "min": 10,

        "max": 150,

        "step": 5,

        "unit": "px",

        "label": "mobile description font size",

        "default": 15

      },

        {

        "type":"color",

        "id":"mobile_des_color",

        "label":"Mobile description text color"

      },

      {

          "type":"color",

          "id":"mobile_des_bg",

          "label":"Mobile background color"

        },

      {

        "type": "range",

        "id": "mobile_padding",

        "min": 10,

        "max": 150,

        "step": 5,

        "unit": "px",

        "label": "Padding",

        "default": 15

      },

      {

        "type": "range",

        "id": "block_mobile_margin",

        "min": 10,

        "max": 150,

        "step": 5,

        "unit": "px",

        "label": "Section mobile padding",

        "default": 15

      },

      {

      "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": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"

  }

  },

  {

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