Re: How to Change Video Height and Width

WK100 · ‎10-05-2023

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?

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

shreyhweb · ‎10-05-2023

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 - [email protected]

View solution in original post

shreyhweb · ‎10-05-2023

@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

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 - [email protected]

WK100 · ‎10-05-2023

@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:

shreyhweb · ‎10-05-2023

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 - [email protected]

shreyhweb · ‎10-05-2023

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 - [email protected]

WK100 · ‎10-05-2023

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

shreyhweb · ‎10-05-2023

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 - [email protected]

shreyhweb · ‎10-05-2023

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 - [email protected]

shreyhweb · ‎10-05-2023

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 - [email protected]

WK100 · ‎10-05-2023

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

Before I hit play (looks good):

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

shreyhweb · ‎10-05-2023

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 - [email protected]

shreyhweb · ‎10-05-2023

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 - [email protected]

WK100 · ‎10-05-2023

Yes! Thank you @shreyhweb

shreyhweb · ‎10-05-2023

@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 - [email protected]

debcoen · ‎05-02-2024

I used this same code and the video is still large on my screen. Looks great on an iPhone but not on a desktop screen. I am using the "Spotlight" template. Can you provide the code to decrease the size of the video?

AmineBoyauzan · ‎04-24-2024

Still doesn't work

Valeria-Davila · ‎03-24-2024

Here's how you can adjust the height and width of the video section for different devices using HTML and CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Section</title>
<style>
/* Styles for desktop */
@media screen and (min-width: 768px) {
.video-section {
width: 50%; /* Adjust the width as per your preference */
height: auto; /* Allow the height to adjust proportionally */
}
}

/* Styles for mobile */
@media screen and (max-width: 767px) {
.video-section {
width: 100%; /* Set to full width on mobile */
height: auto; /* Allow the height to adjust proportionally */
}
}

/* Additional styles */
.video-section {
/* Add any other styles you need for the video section */
}
</style>
</head>
<body>

<div class="video-section">
<video src="your-video.mp4" controls></video>
</div>
</body>
</html>

shreyhweb · ‎10-05-2023

@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 - [email protected]

localitees · ‎03-11-2024

I love how infrequently these "solutions" work and how everyone offering them is way more concerned with us liking these awful solutions and unclear instructions. Earn it first! Please!

Moeed · ‎10-05-2023

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:

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

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications

WK100 · ‎10-05-2023

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?

Re: How to Change Video Height and Width

How can I adjust the height and width of a video section?

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

Re: How to Change Video Height and Width

How can I adjust the height and width of a video section?

- Need a Shopify Specialist? Chat on WhatsApp ✅- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications