Code to center video on homepage

Allyoops
New Member
5 0 0

Hey all,

I added an mp4 video to my homepage and it looks great, I even figured out how to resize it, but I can't see where in the code I can align the video to the center (it's currently left aligned). Yes, I'm a code/theme newbie lol.

Website is www.brookasa.com

Code is pasted below. Thanks in advance for any help!

 

<!-- /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="50%">
<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 %}

0 Likes

Hey,

1. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
2. paste this code right above the </body> tag:

<style>
.shopify-section [data-section-id] video{
display: block !important;
margin: 0 auto !important;
max-width: 760px !important;
width: 100% !important;
}
</style>


Hope it helps.

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
Jingle
Tourist
7 0 2

So I copy/paste this code but the video stayed on the left margin? What else should I do?

0 Likes
jtdesign
Shopify Partner
35 0 5

Hey there, 

 

I've used the provided code to integrate the video but the text is not centered on the video itself. 

The only CSS I see is this 

 

 

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

 

 

and my title is center but under the video (see screenshot) 

 

Capture d’écran 2021-07-22 à 20.38.52.jpg

Thanks 

 

 

0 Likes
jtdesign
Shopify Partner
35 0 5

Thanks to @Ninthony for his help in solving the issue 

.homepage-image {
    position: relative;
}

.content--centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,.8);
}
.content--centered h1{
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

 

Thanks ! 

0 Likes