How can I make a video display only on desktop and not on mobile?

[Zetterman]

Hi i want the video to not show on mobile but don't understand what's wrong with this code

<style>
@media screen and (min-width: 768px)
{
video {
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
}
}

@media screen and (max-width: 768px)
{
video {
display: none;
}
}
</style>

<video autoplay loop playsinline muted>
<source src="https://cdn.shopify.com/videos/c/o/v/35fa068e97f84cfdb642d30b40cf7ce6.mp4"
</video>

[GabrielS]

Hi there,

Try to use !important and the end of the CSS style, as below:

video {
display: none !important;
}

Cheers!

[ksdigital]

GO Immobilier, spécialiste en Digital Marketing Suisse.

Site internet gratuit Suisse

[made4Uo]

Hi @Zetterman 

Try the video tutorial below to only show certain section on specific device. 

[ZenoPageBuilder · Accepted solution]

Hello @Zetterman 👋

You should use this code instead

<style>
video {
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px){
    video {
        display: none;
    }
}
</style>

<video autoplay loop playsinline muted>
    <source src="https://cdn.shopify.com/videos/c/o/v/35fa068e97f84cfdb642d30b40cf7ce6.mp4">
</video>

Hope that helps!

[Zetterman]

Thank you so much!

[ZenoPageBuilder]

You are welcome 🙂

[jaidant27]

How about the opposite? Displaying it on mobile but not desktop? Whats the code for that?