I have a page on my site where I’m using a video section that pulls from the Shopify files via the video URL feature. The video is 1080x1920, and while it looks fine on mobile, it doesn’t display well on desktop.
I’m looking for a custom Liquid code solution that would allow me to display one video for mobile devices and another for desktop. Could anyone help me with this?
Also, if possible the videos needs to be in autoloop and with the audio on, but also with an option to mute the video.
@B_Different_Clo all your requirements are pretty much achieveable. but since you already know that this will require coding to be done i would go on to ask you for access to your store so that i can edit code. if this does not suit you then share the theme and the version you are using so that i can try on my own development store.
Hello, thanks for your reply! As shown in the screenshot, I’m looking to use the custom Liquid section where I can insert code and reuse it without permanently modifying the theme’s source code. I’m currently using Dawn 14, though I don’t believe it will make a difference in this case. Thanks again!
@B_Different_Clo okay get it. you dont really have to add a video section here, you can just delete that video section and inside your custom liquid section paste this code.
.my-video {
display: block;
margin: 0 auto;
display: none;
width: 70%; /* Set the width of the video */
height: auto; /* Maintain the aspect ratio */
}
@media (min-width: 768px) {
.desktop-video {
display: block;
}
}
/* Show mobile video on smaller screens */
@media (max-width: 767px) {
.mobile-video {
display: block;
}
}
i believe you will get the code. Make the necessary changes. just copy the video link from media from the store dashboard. Please feel free to reach out if you get stuck anywhere.
Hi Shadab, your code to have 2 videos on different devices worked perfect for me. THANK YOU SO MUCH.
could you please let me know how to make the videos autoplay though based on your code? and if it’s possible to add a button in the video on both mobile and desktop?
Hi @Shadab_dev I was able to use this code on my video to allow both desktop and mobile versions. However I’d love it to not show the play or download button similar to the video upload feature, are you able to help me with this?
