How to display a video on mobile and a different one on desktop?

[B_Different_Clo]

Hello,

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.

Thank you in advance!

[Shadab_dev]

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

Thanks

[B_Different_Clo]

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!

[Shadab_dev · Accepted solution]

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

<style>
.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;
}
}
</style>
<video class="my-video mobile-video" controls autoplay loop muted>
<source src="https://cdn.shopify.com/videos/c/o/v/ef4731fec7f04a8cbb9a76d276c92d37.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video class="my-video desktop-video" controls autoplay loop muted>
<source src="https://cdn.shopify.com/videos/c/o/v/4738523ed3fe471ea7a35d96d81f8fdf.mp4">
Your browser does not support the video tag.
</video>

<script>
// JavaScript to unmute the video after it starts playing
document.addEventListener('DOMContentLoaded', function() {
let videos = document.querySelectorAll('.my-video');
videos.forEach(function(video) {
video.addEventListener('play', function() {
video.muted = false; // Unmute the video when it starts playing
});
});
});
</script>

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. 

Thanks

[B_Different_Clo]

You are a legend, thanks so much for your help!

[Shadab_dev]

Great that it worked out for you as you wanted it to be.

Good luck on your store and your business.

Thanks

[Meganb12]

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?

[Shadab_dev]

In the code just try removing the word controls from the video tag. Or replace controls with this controls="false". 

I think this should remove all the controls like play/pause, sound, etc.

[manacandice]

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? 

[Shadab_dev]

Hi @manacandice great that It worked out for you. The videos should autoplay with muted feature set to true, i believe my code has that feature on.

And as for adding the buttons it will involve adding/modifying code to let you choose to display button and how you need the styling to be.

Please reach out via mail for a convenient conversation and collaboration 

Best

Shadab Ali