1

I have a video background and since it takes quite a lot of MB to load that, I want to disable the video on smartphones. The CSS itself is easy:

video{
   display:none;
}

But, how to get the media query so that it won't affect desktop and laptop screens? Because smartphones are getting higher and higher resolutions and the old method of just targeting a smaller amount of pixels (±450px e.g.) won't work with newer smartphones anymore. The width and height of the smartphone shouldn't matter, I fixed that in my 'regular' media queries, so that the css changes when my design breaks.

Lisa
  • 897
  • 9
  • 27
  • 2
    Although it should, `display: none` isn't necessarily going to make your video not load. This may be better handled on the server-side where your HTML is generated. – James Donnelly Oct 16 '14 at 15:07
  • I think this should perhaps be a broader question. In fact, it would be nice if we did have some way of querying the user's connection to see if it is appropriate to send large images or video... I can definitely see many uses for "is on limited data plan" as a query. – Niet the Dark Absol Oct 16 '14 at 15:07
  • Use `@media only screen` – TylerH Oct 16 '14 at 15:07
  • @TylerH When putting this media query in and checking it in my browser (safari on mac) it disables the video, while I want it to play. So that doesn't work. @ James Donnelly What would be the best way to prevent loading? @ Niet the Dark Absol Fine with me, I just want to prevent slow loading on smartphones :) – Lisa Oct 16 '14 at 15:11
  • @Lisa You should also include specific width/height declarations so that it knows what size of device to target. Also FYI you can only ping (@Lisa) a single user per comment, so James and Niet won't get your pings. – TylerH Oct 16 '14 at 15:14
  • @TylerH Yeah the SO site mentioned that haha. Your solution, wouldn't it be a problem that the newer smartphones have very high resolutions, almost the same (or higher) than some displays. This will cause 'confusion' within my css, causing the displays to have disabled videos, right? – Lisa Oct 16 '14 at 15:21
  • This is a really good question to ask, which relates to @NiettheDarkAbsol 's comment. It would be great to have a canonical question on how to handle targeting high-resolution mobile devices with media queries, since the traditional method of (320px - 480px) doesn't work anymore. – TylerH Oct 16 '14 at 15:28
  • related: http://stackoverflow.com/questions/10738479/css-media-query-to-handle-new-high-resolution-mobiles-whilst-ignoring-tablets – TylerH Oct 16 '14 at 15:28
  • @TylerH I assume from your comment that that doesn't exist yet? Would there be a workaround to check if the user is using a smartphone, for example with javascript or jquery? – Lisa Oct 16 '14 at 15:33
  • 1
    @Lisa correct. Check http://stackoverflow.com/questions/14440296/reliable-way-to-detect-desktop-vs-mobile-browser or http://stackoverflow.com/questions/588940/what-is-the-best-way-to-do-browser-detection-in-javascript or things like Modernizr. Search for "mobile detection" with javascript – TylerH Oct 16 '14 at 15:52
  • OK, so no real solution to this issue, but thanks a lot for your help :) – Lisa Oct 16 '14 at 15:56
  • 1
    @Lisa [This list](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Pseudo-BNF_%28for_those_of_you_that_like_that_kind_of_thing%29) may help you now/in the future – TylerH Oct 16 '14 at 17:56

1 Answers1

0

Use something like

@media (max-width: 480px) {

video {
display: none;
}

}

This will display nothing for screen sizes with a maximum of 480 pixels (majority of smartphones)

eggman
  • 383
  • 1
  • 5
  • 17
  • 1
    Isn't that outdated and thus too small? Since the newer smartphones have bigger resolutions: http://www.gizmag.com/smartphone-comparison-2014-1/31787/ – Lisa Oct 16 '14 at 15:16
  • Well yeah in theory that would target iphone 3g/smasung s2 etc. so quite old. You can adjust accordingly based on devices you wish to target. – eggman Oct 16 '14 at 15:17
  • I don't think blackberries are still used/sold anymore. At the very least, it's *not* what people refer to when they say "smartphone". – TylerH Oct 16 '14 at 15:18
  • Yeah sorry about that don't know where i got blackberry from – eggman Oct 16 '14 at 15:19
  • @user3125923 The problem with this solution is that if I adjust it to the devices I want to target, a nexus 5 (for example) won't display video, but some browsers that have a width of 1080px too, won't play video either. I'm mainly concerned about the data-usage, because I don't think mobile users will be happy when my site sucks up all their internet bundle haha. – Lisa Oct 16 '14 at 15:22
  • Yeah that's fair enough!This article may be of use to you: http://www.htmlgoodies.com/html5/css/cutting-edge-device-targeting-with-css3-media-queries.html#fbid=qkj6wEuee8k – eggman Oct 16 '14 at 15:52