Help with Video with Text Overlay Section.

Highlighted
Excursionist
37 0 2

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

 

1 Like
Highlighted
Shopify Partner
7740 1060 2687

Hello, @patdonfro 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
37 0 2

@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!

0 Likes
Highlighted
Shopify Partner
7740 1060 2687

@patdonfro 

Thanks for update

give me screenshot do you need changes

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
37 0 2

@KetanKumar 

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

skateshop-tester.myshopify.com

Screen Shot 2020-09-08 at 12.01.33 AM.png

 

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

 

0 Likes
Highlighted
Shopify Partner
7740 1060 2687

@patdonfro 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
37 0 2

@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.

screenshot.jpg

1 Like
Highlighted
Shopify Partner
7740 1060 2687

@patdonfro 

sorry fo this 

can you please add this code also

.homepage-image {
    position: relative;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like