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.

ALLSTON VILLAGE

Here is the section code

{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}

{% endif %}

{% if section.settings.button_image %}

{% else %}
{% unless section.settings.title == '' %}# {{ section.settings.title | escape }}{% endunless %}
{% unless section.settings.description == '' %}

{{ section.settings.description }}

{% endunless %}
{% unless section.settings.link_text == '' %}{{ section.settings.link_text | escape }}{% endunless %}
{% endif %}

{% if section.settings.link_text == '' and section.settings.link and section.settings.button_image == nil %}

{% endif %}
{% if section.settings.height == 'use_screen_full' %}

{% include 'svg-down' %}

{% endif %}

 

{% 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.

TESTER

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;
}