Search code examples
htmlcssvideohidden

@media (max-width or min-width) for video

I want to ask - this function for an image to hide or reveal at a given resolution (sample in code) - can it be applied to video as well? Thanks

@media (max-width:375px) {
                img#eq {
                display: none;
            }
<img id="eq"  src="assets/images/picture.jpg">

Solution

  • Media Queries can be used always within CSS and works on everything that can eb addressed by CSS. This also includes videos as the snippet below shows.

    video {
  width: 100%;
}

@media only screen
  and (max-width: 374px) {
    video {
      display: none;
    }
}

@media only screen
  and (min-width: 375px) {
    video {
      display: block;
    }
}
    <video controls>
  <source src="https://www.tacoshy.de/stackoverflow/testvideo.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>