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