is it possible to target handheld mobile devices in html/css?

Question

I have a video in my html that I want only to show on desktop browsers because the difference in bandwidth i believe from desktop to mobile cripples the mobile browsers somewhat. Is there any logic in html, or css i can use to target mobile devices?

here is my current 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 current 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;
}

is there any media queries or any logic i can implement to make this video only display in desktop browsers?

Answer 1

You can use following media query to not to display second_section div in mobile devices.

In addition to that, you can show another video clip which optimized for mobile devices in the same media query

@media (min-width:767px) {
    .second-section {
        display:block !important;
    }
    .second-section-mobile {
        display:none !important;
    }
}

@media (max-width: 766px) {
    .second-section {
        display:none !important;
    }
    .second-section-mobile {
        display:block !important;
    }
}

OPTIONALLY - You can use following lines to create more breakpoints

/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
}