FROM CACHE - en_header

add a video on my homepage (without youtube)

Solved
choosemishop
Tourist
7 1 0

Hello, I would like to add a video on my homepage. I created a new section and the video appears on my homepage but I want to center because it appears on the left. 

 

Here is the code I added : 

<div class="section-hura-video">

 <video loop="" muted="" autoplay="autoplay" preload="" id="vid">

    <source src="https://cdn.shopify.com/s/files/1/0085/2325/1830/files/NEWVI.mp4?573" type="video/webm">

    <source src="https://cdn.shopify.com/s/files/1/0085/2325/1830/files/NEWVI.mp4?573" type="video/mp4">

  </video>

 

</div>

{% schema %}

{

"name": "Section name",

"settings": []

}

{% endschema %}

 

{% stylesheet %}

.section-hura-video{

  width:100%;

}

.hurabg-video{

  right: 0;

  bottom: 0;

  width: 100%;

  height: auto;

}

{% endstylesheet %}

{% javascript %}

{% endjavascript %}

 

Can you please help me to center the video ? Thank you

Accepted Solutions (2)

Accepted Solutions
oscprofessional
Shopify Partner
12515 1931 2478

This is an accepted solution.

@choosemishop,

Yes,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#shopify-section-index-hura-video .section-hura-video {
	text-align: center;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

choosemishop
Tourist
7 1 0

This is an accepted solution.

Thank you so much !!!

Do you know how to do it on the mobile version ? 

It is perfect on the computer but not on the mobile...

View solution in original post

Replies 11 (11)
oscprofessional
Shopify Partner
12515 1931 2478

Hello @choosemishop,

Please share your site url so that I will give you exact solution

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
12515 1931 2478
Hello choosemishop,
Please share your site url so that I can check and let you know exact solution here.
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
choosemishop
Tourist
7 1 0
Here is my website : www.choosemi.net thank you
choosemishop
Tourist
7 1 0

Here is my website : choosemi.net

thank you

oscprofessional
Shopify Partner
12515 1931 2478

Hello,

I am unable to see video on your site

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
choosemishop
Tourist
7 1 0

Can you see it now?

oscprofessional
Shopify Partner
12515 1931 2478

This is an accepted solution.

@choosemishop,

Yes,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

#shopify-section-index-hura-video .section-hura-video {
	text-align: center;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
choosemishop
Tourist
7 1 0

This is an accepted solution.

Thank you so much !!!

Do you know how to do it on the mobile version ? 

It is perfect on the computer but not on the mobile...

oscprofessional
Shopify Partner
12515 1931 2478

@choosemishop,

Please add below css

.section-hura-video #vid {
	width: 100%;
}
Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
kuchak
Excursionist
33 1 4

Hi! @choosemishop where did you add the original video code, I tried to add at the bottom of theme.scss.liquid, but it gave me an error

choosemishop
Tourist
7 1 0

Hi,

I also added it at the bottom but it worked for me...