Code to center video on homepage

Highlighted
New Member
3 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
Highlighted
Astronaut
1085 177 213

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.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
7 0 1

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

0 Likes