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’ %}
{%- if block.settings.video_link != blank -%}
<video class=“video-js” loop autoplay preload=“none” muted playsinline
poster=“https:{{ block.settings.video_image | img_url: ‘master’ }}”>
{% endif %}
{% if block.settings.title != blank %}
{{ block.settings.title | escape }}
{% endif %}
{% 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 -%}
.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 %}{% 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”: “
Use this text to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.
”}
},
{
“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”: “
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 %}