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.

http://stackoverflow.com/questions/3514784/best-way-to-detect-handheld-device-in-jquery - Here is good answer for your question — Taron Mehrabyan, Feb 10 '13 at 22:55
Even if it is hidden, it is most likely still going to download. — cimmanon, Feb 10 '13 at 23:14
Not in iOS, but maybe in android, blackberry, etc. I'm trying to find a solution because the iPad doesn't seem capable of having a poster frame unfortunately. It's always just a black box. — nbu, Feb 10 '13 at 23:18

score 1 · Answer 1 · answered Feb 10 '13 at 22:53

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.

score 1 · Accepted Answer · answered Feb 10 '13 at 22:57

1

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

answered Feb 10 '13 at 22:57

Nikola Sivkov

2,779
3
31
63

score 0 · Answer 3 · answered Feb 10 '13 at 22:54

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).

Can I hide html5 video tag on everything but desktops?

3 Answers3