Solved

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

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
631 109 114

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 20 (20)

shreyhweb
Shopify Partner
631 109 114

@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
631 109 114

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
631 109 114

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
631 109 114

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
631 109 114

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
631 109 114

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
631 109 114

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
631 109 114

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
631 109 114

@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
debcoen
Visitor
1 0 0

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
Shopify Partner
2 0 0

Still doesn't work

Valeria-Davila
Visitor
1 0 0

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>

shreyhweb
Shopify Partner
631 109 114

@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
localitees
Visitor
1 0 0

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
Shopify Partner
3793 958 1189

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. ❤️
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?