How can I hide a video on desktop but keep it on mobile view?

[valerie92]

Hi, 

Can someone help me hide a video on desktop but keep on mobile view. The video is just too big on desktop but look perfect on mobile. 

I'm using a custom liquid with this code 

<style>
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
<video muted autoplay playsinline loop>
<source src=" "
type="video/mp4">
<source src=" "
type="video/mp4">
</video>

and the theme is Studio. 

Please give me step by step instructions. I'm still pretty new and sometimes don't understand  🙂

Thank you. 

[Michael_Pink · Accepted solution]

Hi @valerie92 
In this case you can add a class for video like this

<video class="hidden-desktop" muted autoplay playsinline loop>
<source src=" "
type="video/mp4">
<source src=" "
type="video/mp4">
</video>

Then add this css into CSS file

@media(min-width: 767px){
.hidden-desktop{
display: none;
}
}

[valerie92]

It worked! Thank you so much 🙂

[offcanvas]

Hi Michael, 

I am still having issues with this code, are you able to assist? Thank you!