Hello Team!
Can someone help with our video banner, the button does not display
The video does not play on mobile until you scroll also whereas on desktop it plays automatically
Css for banner in the editor:
.videoBackground .fullscreen-video-wrap .video-js {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
object-fit: contain; /* Changed from cover to contain /
}
.videoBackground .fullscreen-video-wrap video {
min-height: 100%;
min-width: 100%;
object-fit: contain; / Changed from cover to contain */
}
Section for homepage banner:
{%- 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 -%}
.main-content .videoBackground { margin-top: -55px; } .videoBackground { height: 100%; 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: flex-end; flex-direction: column; padding: 100px 20px 80px; background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px; max-height: 800px; height: calc(100vh - 165px); 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; min-height: calc(100vh - 165px); height: auto; } .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo { z-index: 2; 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: 8px 15px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; white-space: normal; font-size: 14px; margin-top: 20px; } .videoBackground .videoBoxInfoTitle, .videoBackground .imageBoxInfoTitle { color: #FFF; font-size: 30px; line-height: 40px; } .videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription { max-width: 500px; margin: 0 auto; } .videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p { font-size: 18px; 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: 500px; height: 100%; position: relative; padding: 0; } .videoBackground .fullscreen-video-wrap { position: relative; min-height: 300px; } .videoBackground .videoBoxInfo { padding: 40px 20px; background: #000; width: 100%; } }{% 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 %}
Theme code:
.videoBackground .videoBoxInfo { display: none !important; } .videoBackground .videoBox { min-height: 100% !important; } .videoBackground .videoBox video.video-js { position: unset !important; }