Solved

How to Change Video Height and Width

WK100
Explorer
55 1 9

Hey There! I have a video section that I want to change the height and width of. On mobile, I like the current size but on desktop the size of the video section is much too big. I would like to make it smaller. Any ideas how to do this? 

WK100_0-1696528339317.png

 

 

Link: https://obrcf218ldb954jf-81877893427.shopifypreview.com

Accepted Solution (1)
shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

Please replace the previous code with the below code. 

 

<style>
@media screen and (min-width: 770px) {
.video-section__media.deferred-media{
max-width: 500px;
text-align: center;
--ratio-percent: 45%!important;
margin: auto;
}
.video-section__media video{
max-width: 500px;
height: auto!important;
left: 0!important;
}
}
</style>
- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

View solution in original post

Replies 16 (16)

shreyhweb
Shopify Partner
627 110 112

@WK100 

 

Hello,

 

You can add below code above <body> in theme.liquid

 

online store >> edit code >> theme.liquid

 

<style>
@media screen and (min-width: 770px) {
.video-section__media.deferred-media{
max-width: 500px;
text-align: center;
}
.video-section__media video{
max-width: 500px;
height: auto!important;
}
}
</style>

 

after added code

shreyhweb_0-1696531548449.png

 

if our solution is helpful for you then please like the post and tap on accepted.

 

Thankyou

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
WK100
Explorer
55 1 9

@shreyhweb Hey! Where exactly do I need to copy this code? I am pasting it at the bottom above </body> but it is not working. It looks like this: 

WK100_0-1696532485841.png

 

shreyhweb
Shopify Partner
627 110 112

Please apply the code and message us. i will check what the issue on there.

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
627 110 112

Please try this code

<style>
@media screen and (min-width: 770px) {
.video-section__media.deferred-media{
max-width: 500px;
text-align: center;
--ratio-percent: 45%!important;
margin: auto;
}
.video-section__media video{
max-width: 500px;
height: auto!important;
}
}
</style>

 

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
WK100
Explorer
55 1 9

Yes @shreyhweb! That worked but now the issue is that it is not centered in the screen. How do I do that? 

WK100_0-1696533060187.png

 

shreyhweb
Shopify Partner
627 110 112

we are update this code please copy again and use it.

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
627 110 112

Are you clear now?

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
627 110 112

are you using this below updated code?

<style>
@media screen and (min-width: 770px) {
.video-section__media.deferred-media{
max-width: 500px;
text-align: center;
--ratio-percent: 45%!important;
margin: auto;
}
.video-section__media video{
max-width: 500px;
height: auto!important;
}
}
</style>
- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
WK100
Explorer
55 1 9

@Shrey This is working but when I play the video it moves to the right. See below: 

Before I hit play (looks good):

WK100_0-1696533491261.png

After I hit play (moves to the right. I want it to stay centered): 

WK100_1-1696533525995.png

 

 

shreyhweb
Shopify Partner
627 110 112

This is an accepted solution.

Please replace the previous code with the below code. 

 

<style>
@media screen and (min-width: 770px) {
.video-section__media.deferred-media{
max-width: 500px;
text-align: center;
--ratio-percent: 45%!important;
margin: auto;
}
.video-section__media video{
max-width: 500px;
height: auto!important;
left: 0!important;
}
}
</style>
- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
627 110 112

I hope everything is right now?

 

Please also like the post.

 

Thankyou 🙂

 

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
WK100
Explorer
55 1 9

Yes! Thank you @shreyhweb 

shreyhweb
Shopify Partner
627 110 112

@WK100 

 

Welcome, we are always here for your help.

 

You can also contact us on whatsapp or email.

 

Thankyou have a nice day 🙂

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
627 110 112

@WK100 

 

hey, there a different issue rise after playing video.

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com

Moeed
Shopify Partner
3542 892 1107

Hey @WK100 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.video-section__media.deferred-media video {
    height: 50% !important;
}
}
</style>

RESULT:

Moeed_0-1696531896641.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App
WK100
Explorer
55 1 9

Hey @Moeed! I applied the code but it is still looking the same. I have left the code up for you to see. Any ideas why this is not working for me?