Have your say in Community Polls: What was/is your greatest motivation to start your own business?

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

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
633 111 117

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

shreyhweb
Shopify Partner
633 111 117

@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
633 111 117

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
633 111 117

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
633 111 117

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
633 111 117

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
633 111 117

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

@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

 

 

shreyhweb
Shopify Partner
633 111 117

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
633 111 117

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
633 111 117

@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
2 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
633 111 117

@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
6317 1713 2060

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

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


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? 

Shokir
Tourist
6 0 0

If you're still having trouble with this issue, I recommend adding this code right before the closing </body> tag in the theme.liquid file. It works well without moving the video when it plays.

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

}
.video-section__media video{
max-width: 500px;
height: auto!important;

}
  .video-section__media.deferred-media.gradient.global-media-settings.scroll-trigger.animate--slide-in {
  display: flex;
  top: 50%;
  left: 50%;
  padding-left: -40%;
  margin-left: -20%;
}
}
</style>