What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Center align liquid content- video

Solved

How can I center align a non-Youtube video on a webpage?

imexmodelco2
Tourist
10 0 3

Hi all,

Found code on another forum post to add videos not on Youtube to our website's homepage, and it works great. The video is in portrait mode so I sized it down, but we'd like the video to be centered. Here's the code I used, added to a new liquid section: 

 

<div class="section-homepage-video">
<video autoplay muted loop playsinline class="video-homepage">
<source src="https://cdn.shopify.com/videos/c/o/v/99c9561a99b2449393881f56d466cf96.mp4 " type="video/mp4">
</video>
</div>
{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
.section-homepage-video{
width:100%;
}
.video-homepage{
width: 50%;
height: auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Can this be centered? Any help will be appreciated. 

Screenshot 2023-11-20 124845.png

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
10304 2044 2117

This is an accepted solution.

Got it, so please update code to this and add it to theme.liquid file before </head> tag

<style>
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video { text-align: center; }
@media (max-width: 767px){
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video {
padding: 0 2rem;
}
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video .video-homepage { width: 100%; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

Hi @imexmodelco2 

You can try to update your code to this and check if it works 

<div class="section-homepage-video">
<video autoplay muted loop playsinline class="video-homepage">
<source src="https://cdn.shopify.com/videos/c/o/v/99c9561a99b2449393881f56d466cf96.mp4 " type="video/mp4">
</video>
</div>
{% schema %}
{
"name": "Homepage Video",
"class": "index-section index-section--flush",
"settings": [],
"presets": [{
"name": "Homepage Videos",
"category": "Text"
}]
}
{% endschema %}
{% stylesheet %}
.section-homepage-video{
width:100%;
}
.video-homepage{
width: 50%;
height: auto;
margin: 0 auto;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

imexmodelco2
Tourist
10 0 3

That didn't quite work- it resized it to be too big again and still is on the left

Screenshot 2023-11-21 122844.png

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

Could you send me your store link to check?

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

imexmodelco2
Tourist
10 0 3

Here is the link, thank you!

IMEX RC

 

Video is not up right now because of the incorrect formatting- we didn't want to post the video on Youtube, hence the workaround

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

Please enable that video section so I can check and help you

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

imexmodelco2
Tourist
10 0 3

It is enabled on the bottom of the landing page now: 

https://www.imexrc.com/

 

Thank you!

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

Please add this code to Custom CSS of that section to make the video full width

.video-homepage { width: 100%; padding: 4rem; }
@media (max-width: 767px){ padding: 2rem; }

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

imexmodelco2
Tourist
10 0 3

We don't want the video to be full page width, maybe half. Just want the video itself centered on the page. If video is full width, it will be far too long on our page since it's a vertical video. That's why I had it at 50% width in the original code.

 

The custom CSS doesn't work with it anyway: "Invalid custom CSS: Certain At-rules are not supported. Try using global CSS."

 

Thank you for trying anyway. 

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

This is an accepted solution.

Got it, so please update code to this and add it to theme.liquid file before </head> tag

<style>
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video { text-align: center; }
@media (max-width: 767px){
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video {
padding: 0 2rem;
}
#shopify-section-81f26864-ae48-4fe1-8988-4df2d767f3c3 .section-homepage-video .video-homepage { width: 100%; }
}
</style>

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

imexmodelco2
Tourist
10 0 3

This worked perfectly, thank you!

Dan-From-Ryviu
Shopify Partner
10304 2044 2117

Happy I could help 😊

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.