Help with Video with Text Overlay Section.

[aliboulala]

So I have this section for Video with Text overlay however the text is below this video.  Does anyone know how to adjust this.  I think I need to add some code into the theme file but I am unsure what.

allstonvillage.myshopify.com

Here is the section code 

<!-- /sections/index-mp4.liquid -->

<div class="homepage-image preventOverflow {{ section.settings.height }} {{ section.settings.color }}" data-section-id="{{ section.id }}" data-section-type="banner" {% if section.settings.parallax %}data-img-src="{{ background_image }}"{% endif %}>

<video autoplay loop muted playsinline width="100%">
<source src="{{ section.settings.videofile }}" type="video/mp4" id="{{ section.id }}">
</video>


{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
<a href="{{ section.settings.link }}">
{% endif %}


<div id="index-mp4-video">

</div>

<div class="content--centered mp4">
<div class="{{ section.settings.text_align }} preventOverflowContent">
{% if section.settings.button_image %}
<a href="{{ section.settings.link }}">
<img src="{{ section.settings.button_image | img_url: '1000x' }}" alt="{{ section.settings.button_image.alt | default: section.settings.link_text }}" class="image--flex" />
</a>
{% else %}
{% unless section.settings.title == '' %}<h1 class="title--flex">{{ section.settings.title | escape }}</h1>{% endunless %}
{% unless section.settings.description == '' %}<p class="content--flex h4--body">{{ section.settings.description }}</p>{% endunless %}
{% unless section.settings.link_text == '' %}<a class="{{ section.settings.button_style }}" href="{{ section.settings.link }}">{{ section.settings.link_text | escape }}</a>{% endunless %}
{% endif %}
</div>
</div>

{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}
</a>
{% endif %}
{% if section.settings.height == 'use_screen_full' %}
<div class="scroll_icon_wrap">
<a href="#scroll-{{ section.id }}" class="scroll_link bloop">
<span class="scroll_icon">{% include 'svg-down' %}</span>
</a>
</div>
<div class="scroll__link" id="scroll-{{ section.id }}"></div>
{% endif %}
</div>

 

<script type="text/javascript">
document.getElementById('{{ section.id }}').play();
$(function () {
if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$("video").prop('muted', false);
}
});
</script>


{% schema %}
{
"name": "Video MP4",
"settings": [
{
"type": "text",
"id": "videofile",
"label": "Video URL",
"default": "https://cdn.shopify.com/s/files/1/2018/8867/files/ice.mp4"
},
{
"type": "header",
"content": "Text"
},
{
"type": "text",
"id": "title",
"label": "Headline",
"default": "Video with text overlay"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "This area is used to describe your store."
},
{
"type": "select",
"id": "text_align",
"label": "Alignment",
"default": "text-center",
"options": [
{ "value": "text-left", "label": "Align Left"},
{ "value": "text-center", "label": "Align Center"},
{ "value": "text-right", "label": "Align Right"}
]
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 5,
"label": "Image overlay opacity",
"info": "Increase contrast for legible text.",
"default": 15
},
{
"type": "select",
"id": "color",
"label": "Text color",
"default": "homepage--white",
"options": [
{ "value": "homepage--white", "label": "White"},
{ "value": "homepage--light", "label": "Light"},
{ "value": "homepage--splash", "label": "Accent"},
{ "value": "homepage--dark", "label": "Dark"}
]
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "View products"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"default": "btn btn--large btn--clear btn--square uppercase",
"options": [
{ "value": "btn btn--large btn--splash uppercase", "label": "Round"},
{ "value": "btn btn--large btn--splash btn--square uppercase", "label": "Square"},
{ "value": "btn btn--large btn--clear uppercase", "label": "Transparent round"},
{ "value": "btn btn--large btn--clear btn--square uppercase", "label": "Transparent square"},
{ "value": "btn btn--large btn--outline btn--square uppercase", "label": "Outlined square"}
]
},
{
"type": "header",
"content": "Overlay image (optional)"
},
{
"type": "image_picker",
"id": "button_image",
"label": "Replaces all text",
"info": "1000 x 1000px .png max"
}
],
"presets": [
{
"name": "Video with text overlay",
"category": "Video"
}
]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

[KetanKumar]

Hello, @aliboulala 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.homepage-image {
    position: relative;
.content--centered.mp4 {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
}

[aliboulala]

@KetanKumar 

So I ended up trying it now on a friends website and the text doesn't work.  the website is skateshop-tester.myshopify.com

I got it install great, and put the code to put the text in the middle but it stays below still.  Do you know how to adjust this, and also how to adjust the text size for mobile?

Thanks!

[KetanKumar]

@aliboulala 

Thanks for update

give me screenshot do you need changes

[aliboulala]

@KetanKumar 

Here is screenshot.  The text is still below the video and not centered over it like I was hoping.

skateshop-tester.myshopify.com

There was no theme.scss.liquid so I put your code in stylesheet.css.liquid, maybe that is why it's not working?  Is there also a way to adjust the sizing of the text for mobile?

Thanks!

.homepage-image {
    position: relative;
.content--centered.mp4 {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
}

[KetanKumar]

@aliboulala 

First, remove the above code 

then add this 

1. Go to Online Store->Theme->Edit code
2. Asset->/stylesheet.css->paste below code at the bottom of the file.

.homepage-image .content--centered {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

[aliboulala]

@KetanKumar 

Hey, still not working, I deleted and then pasted exactly what you said and it put the text at the top of my page and not on top of the video element.

I'll attach photos.

[KetanKumar]

@aliboulala 

sorry fo this 

can you please add this code also

.homepage-image {
    position: relative;
}