Can I hide html5 video tag on everything but desktops?

Question

Is there a way to do that? I don't want the video showing up on tablets or phones.

Answer 1

Use CSS media queries like this:

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

This will hide the class .video for all screens up to 680px wide

Edit: You can of course also do this the other way around, and set .video to display: none by default, and then use min-width inside a media query to actually show it from a certain width.

Answer 2

1. detect width with css media queries or JS
2. android tablets have "mobile" in their browser user agent , ios is easy to detect.
3. detect support for the video tag with modernizr .

Answer 3

Yes, with media queries:

<div id="video">
  //Video here
</div>

@media only screen and (max-width: 500px) {

    #video {
      visibility: hidden;
    }

}

This will hide the div with the ID of "video" for screensizes smaller than 500px (or whatever pixel width you determine).