Amending Code on Custom Section for Video Banner

meepmediauk
Shopify Partner
12 0 1

I've got a custom section for a video autoplay banner on Dawn theme. I cannot figure out how to make the text sit to the left. I'm also having an issue with the Overlay not working. Any help appreciated. 

This is what it currently looks like:

Screenshot 2024-04-16 at 18.21.55.png

 

This is where I'd like the text to be:

Screenshot-2024-04-16-at-18.21.55.png

The code for the section is here:

{%- 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="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
 
<div class="videoBoxInfo">
 
{% if block.settings.title != blank %}
 
<div class="videoBoxInfoTitle" style="color: {{ block.settings.color_text }}">
 
{{ block.settings.title | escape }}
 
</div>
 
{% endif %}
 
 
 
{%- style -%}
.videoBackground {
position: relative;
        color: {{ block.settings.color_text }}!important;
 
}
  .videoBackground .videoBoxInfo, .videoBackground .imageBoxInfo {
 
z-index: 2;
text-align: left;
padding-bottom: 80px;
 
    
}
 
{%- 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="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="overlay" style="opacity: 0.{{ block.settings.overlay_opacity }}"></div>
 
 
 
<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 {
 
height: 600px
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: left;
 
}
 
.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: 5px;
 
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: 40px;
 
line-height: 40px;
 
font-family: Playfair Display;
 
text-align: left;
 
}
 
.videoBackground .videoBoxInfoDescription, .videoBackground .imageBoxInfoDescription {
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
.videoBackground .videoBoxInfoDescription p, .videoBackground .imageBoxInfoDescription p {
 
font-size: 16px;
 
line-height: 28px;
  
font-family: Archivo;
 
}
 
.videoBackground .placeholderNoblocks {
 
text-align: center;
 
max-width: 500px;
 
margin: 0 auto;
 
}
 
    @media screen and (max-width: 100%) {
 
.main-content .videoBackground {
 
margin-top: -35px;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
z-index: 3;
 
}
 
.videoBackground .videoBox {
 
min-height: 100%;
 
height: 100%;
 
position: relative;
 
padding: 0;
 
}
 
.videoBackground .fullscreen-video-wrap {
 
position: relative;
 
min-height: 300px;
 
}
 
.videoBackground .videoBoxInfo {
 
padding: 40px 20px;
 
background: #000;
 
width: 100%;
 
 
 
    }
 
</style>
 
 
 
{% 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": "<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"
 
}
 
]
 
},
 
{
 
"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 %}
Replies 3 (3)

TerenceKEANE
Shopify Partner
294 61 53

Hi,

What you say can be done. Can you give the website address ?

Terence.

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
meepmediauk
Shopify Partner
12 0 1
meepmediauk
Shopify Partner
12 0 1

Sorry, pw is cheast

mike-oliver-associates.myshopify.com