How can I center a video on my homepage?

Store Design
1

I added a video to my homepage. Uploaded video to files and used this liquid code.

<div class="container"______

What can I add to make it centered?

website: www.jjpromotions.ca

2

Hi, @jjpromotions

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
.section-template--14496534593603__1661982991c2184d41-padding{
    text-align-last: center;
    padding-top: 20px;
}
3

Didn’t work. Did I do it right?

Screenshot 2022-09-01 161922.jpg
Screenshot 2022-09-01 161922.jpg1001Ă—571 77.2 KB

4

download (7).png
download (7).png1112Ă—600 293 KB

5

Still not centered

jjpromotions_0-1662064443871.png
jjpromotions_0-1662064443871.png1106Ă—528 36.9 KB

6

plz, try to paste the code into the theme.liquid file within the head section

7

Nope

jjpromotions_0-1662065189672.png
jjpromotions_0-1662065189672.png1055Ă—751 60.3 KB

8

@jjpromotions ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
  3. paste this code right above the tag:

diego_ezfy_0-1662072557624.png
diego_ezfy_0-1662072557624.png1233Ă—804 86.6 KB

400px = video width

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

1 Like
9

Woohooo Your awesome!! Thank you

10

Ok, I have spent the last 24 hours digging through code variations and FINALLY FOUND IT!

THIS is what you have to do to center a video in the new “video-homepage” section that you add.

Add this first part to the CSS style sheet for the video-homepage section, then make your code for the whole section the last bit of code. I have probably tried 20 variations, broke my page, fixed, it, broke it again, then fixed it and figured this sh*t out.

To center the .video-homepage div and the video-homepage element within it, add the following CSS to your stylesheet:

.video-homepage{
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Set the height of the section to the height of the viewport /
}
.video-homepage{
width: 75%;
height: auto; / Remove the fixed height to maintain aspect ratio /
max-width: 100%; / Make sure the video doesn’t overflow the parent div */
}

:stop_sign:

This will use flexbox to center the content both horizontally and vertically within the video-homepage div. The height: 100vh sets the height of the section to be the full height of the viewport. The max-width: 100% ensures that the video doesn’t overflow the parent div and remains responsive.

Your updated code will look like this:

arduino

REPLACE ALL CODE IN “VIDEO-HOMEPAGE.LIQUID” SECTION WITH THIS:

{% schema %}
{
“name”: “Homepage Video”,
“class”: “index-section index-section–flush”,
“settings”: ,
“presets”: [{
“name”: “Homepage Videos”,
“category”: “Text”
}]
}
{% endschema %}

{% stylesheet %}
.section-homepage-video{
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Set the height of the section to the height of the viewport */
}

.video-homepage{
width: 75%;
height: auto; /* Remove the fixed height to maintain aspect ratio /
max-width: 100%; / Make sure the video doesn’t overflow the parent div */
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}