hi here is the code i found online. I would like the text and button icon on the far left at it interferes with the video. this is for trade theme 14.0
{%- 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 %}
