how do I replicate this #media screen effect in html & css? - html

Question

I have a video in my html that I ideally do not want to play on tablet & mobile device browsers, just desktops. I've come across this site "https://www.myprovence.fr" that mirrors this exactly.
As you can see on the landing page they have a video in the header that when scaled down to a specific breaking point, displays an image (the background image I'm guessing), this is not such a big feat. However, I loaded this site on mobile safari in the iPad Pro simulator from Xcode, & it too instead of showing the actual video, has the image:
As we know, the iPad Pro screen size is well beyond 2000px, so i doubt a #media screen method was used. so how did they create this effect where the video only plays on desktop browsers?
Here is my html:
<div class="second-section">
<video class="rocky" autoplay="true" loop>
<source src="rocky_2.mp4" type="video/mp4">
<source src="rocky_2.webm" type="video/webm">
</video>
<div class="overlay"></div>
</div>
and my css:
.second-section {
position: relative;
height: 100vh;
background-color: #CD9B9B;
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-shadow: 0 1px 3px rgba(0,0,0,.8);
text-align: center;
overflow: hidden;
}
.rocky {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: transparent;
object-fit: contain;
}
any solutions?

Answer 1

So it seems i've been able to target desktop browsers through a media query based on resolution not screen size. Here is the query:
#media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) {
.rocky {
display: none;
}
}
by doing this, the video doesn't play on iPads/iPhone browsers but still does on desktop browsers. To be honest I can't fully wrap my head around the pro's and con's of using this method, so if someone can provide input your more than welcome :)