Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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>
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
@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:
Please apply the code and message us. i will check what the issue on there.
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>
Yes @shreyhweb! That worked but now the issue is that it is not centered in the screen. How do I do that?
we are update this code please copy again and use it.
Are you clear now?
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>
@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):
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>
I hope everything is right now?
Please also like the post.
Thankyou 🙂
Welcome, we are always here for your help.
You can also contact us on whatsapp or email.
Thankyou have a nice day 🙂
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?
Still doesn't work
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>
hey, there a different issue rise after playing video.
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!
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
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?
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>
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024