FROM CACHE - en_header

How to Change Video Height and Width

Solved
WK100
Explorer
51 1 9
‎10-05-2023 01:52 PM

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

Labels:
524 Views
0 Likes
Report
Accepted Solution (1)
In response to WK100
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:21 PM

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

460 Views
Report
Replies 16 (16)
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 02:46 PM

@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
497 Views
0 Likes
Report
In response to shreyhweb
WK100
Explorer
51 1 9
‎10-05-2023 03:02 PM

@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

 

490 Views
0 Likes
Report
In response to WK100
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:03 PM

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
489 Views
0 Likes
Report
In response to shreyhweb
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:09 PM

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
488 Views
0 Likes
Report
In response to shreyhweb
WK100
Explorer
51 1 9
‎10-05-2023 03:11 PM

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

 

486 Views
0 Likes
Report
In response to WK100
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:12 PM

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
479 Views
0 Likes
Report
In response to shreyhweb
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:13 PM

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
473 Views
0 Likes
Report
In response to shreyhweb
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:15 PM

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
471 Views
0 Likes
Report
In response to shreyhweb
WK100
Explorer
51 1 9
‎10-05-2023 03:18 PM

@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

 

 

465 Views
0 Likes
Report
In response to WK100
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:21 PM

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
461 Views
Report
In response to shreyhweb
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:23 PM

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
449 Views
Report
In response to shreyhweb
WK100
Explorer
51 1 9
‎10-05-2023 03:24 PM

Yes! Thank you @shreyhweb 

445 Views
Report
In response to WK100
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:26 PM

@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
443 Views
0 Likes
Report
In response to shreyhweb
shreyhweb
Shopify Partner
598 103 108
‎10-05-2023 03:19 PM

@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
463 Views
0 Likes
Report
Moeed
Shopify Partner
3046 760 924
‎10-05-2023 02:48 PM

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. ❤️
496 Views
0 Likes
Report
In response to Moeed
WK100
Explorer
51 1 9
‎10-05-2023 03:07 PM

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? 

488 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
cropped-shutterstock_offset_2207989361.jpg
Organize Your Products Like a Rainbow: Metafields and Color Sorting

You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...

By Skye Nov 8, 2023
Jasonh_0-1698862247798.png
Community Connect: October Recap

The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...

By Jasonh Nov 6, 2023
Terms of Service Privacy Policy