FROM CACHE - en_header
Promotion image

Re: How to Change Video Height and Width

Solved

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

WK100
Explorer
55 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:
6,611 Views
0 Likes
Report
Accepted Solution (1)
In response to WK100

shreyhweb
Shopify Partner
633 111 116
‎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

6,547 Views
1 Like
Report
Replies 20 (20)

shreyhweb
Shopify Partner
633 111 116
‎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
6,583 Views
0 Likes
Report
In response to shreyhweb

WK100
Explorer
55 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

 

6,576 Views
0 Likes
Report
In response to WK100

shreyhweb
Shopify Partner
633 111 116
‎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
6,575 Views
0 Likes
Report
In response to shreyhweb

shreyhweb
Shopify Partner
633 111 116
‎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
6,574 Views
0 Likes
Report
In response to shreyhweb

WK100
Explorer
55 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

 

6,572 Views
0 Likes
Report
In response to WK100

shreyhweb
Shopify Partner
633 111 116
‎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
6,565 Views
0 Likes
Report
In response to shreyhweb

shreyhweb
Shopify Partner
633 111 116
‎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
6,559 Views
0 Likes
Report
In response to shreyhweb

shreyhweb
Shopify Partner
633 111 116
‎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
6,557 Views
0 Likes
Report
In response to shreyhweb

WK100
Explorer
55 1 9
‎10-05-2023 03:18 PM

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

 

 

6,551 Views
0 Likes
Report
In response to WK100

shreyhweb
Shopify Partner
633 111 116
‎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
6,548 Views
1 Like
Report
In response to shreyhweb

shreyhweb
Shopify Partner
633 111 116
‎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
6,535 Views
1 Like
Report
In response to shreyhweb

WK100
Explorer
55 1 9
‎10-05-2023 03:24 PM

Yes! Thank you @shreyhweb 

6,531 Views
1 Like
Report
In response to WK100

shreyhweb
Shopify Partner
633 111 116
‎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
6,528 Views
0 Likes
Report
In response to shreyhweb

debcoen
Visitor
1 0 0
‎05-02-2024 11:15 AM

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?

3,646 Views
0 Likes
Report
In response to shreyhweb

AmineBoyauzan
Shopify Partner
2 0 0
‎04-24-2024 11:23 AM

Still doesn't work

3,841 Views
0 Likes
Report
In response to WK100

Valeria-Davila
Visitor
1 0 0
‎03-24-2024 12:06 PM

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>
<!-- Your video section HTML -->
<div class="video-section">
<video src="your-video.mp4" controls></video>
</div>
</body>
</html>

4,450 Views
0 Likes
Report
In response to shreyhweb

shreyhweb
Shopify Partner
633 111 116
‎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
6,549 Views
0 Likes
Report
In response to shreyhweb

localitees
Visitor
1 0 0
‎03-11-2024 03:34 AM

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!

4,732 Views
0 Likes
Report

Moeed
Shopify Partner
5476 1480 1769
‎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 Specialist? Chat on WhatsApp ✅

- Custom Design | Advanced Coding | Store Modifications


6,582 Views
0 Likes
Report
In response to Moeed

WK100
Explorer
55 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? 

6,574 Views
0 Likes
Report

Community Blog Articles

b2b-store-_2_.webp
The 9 Questions You Need To Answer When Starting a B2B Store

Starting a B2B store is a big undertaking that requires careful planning and execution. W...

By JasonH Sep 23, 2024
page_thumb_platform Cropped.png
Get ready for peak holiday selling season 2024

By investing 30 minutes of your time, you can unlock the potential for increased sales,...

By Jacqui Sep 11, 2024
03 leaderboard.webp
Highlights | Top Contributors August '24

We appreciate the diverse ways you participate in and engage with the Shopify Communi...

By JasonH Sep 9, 2024
Terms of Service Privacy Policy