0

I have a video in my html that I ideally do not want to play on tablet & mobile device browsers, just desktops. I've come across this site "https://www.myprovence.fr" that mirrors this exactly.

As you can see on the landing page they have a video in the header that when scaled down to a specific breaking point, displays an image (the background image I'm guessing), this is not such a big feat. However, I loaded this site on mobile safari in the iPad Pro simulator from Xcode, & it too instead of showing the actual video, has the image:

enter image description here

As we know, the iPad Pro screen size is well beyond 2000px, so i doubt a @media screen method was used. so how did they create this effect where the video only plays on desktop browsers?

Here is my 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 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;
  object-fit: contain;
}

any solutions?

John Durand
  • 1,934
  • 5
  • 22
  • 34
  • Perhaps they are testing for 'touch device' (modernizr?) capability or using server-side device detection? – davidelrizzo Feb 12 '16 at 05:29
  • I'm sorry, can you elaborate? @davidelrizzo – John Durand Feb 12 '16 at 05:32
  • if you check their [stylesheet](https://www.myprovence.fr/dist/css/style.css) you'll notice @media being used several times. – L777 Feb 12 '16 at 05:41
  • yes i viewed it & even opened it in Atom but its formatted in just one very long string. Very difficult too sift through @Leandro – John Durand Feb 12 '16 at 05:49
  • Is it possible to place a video there on mobile devices anyway? Maybe even if you actually let a video on the header's background its going to shows up as a static image on mobile (I said 'maybe', I dont know, Im just thinking!). – L777 Feb 12 '16 at 05:59
  • no no, on mobile it shows as a video but just not auto play like on desktop. on mobile it has a play button where it plays in its own window, rather than just playing in the background like a desktop @Leandro – John Durand Feb 12 '16 at 06:12
  • On [myprovence.fr](https://www.myprovence.fr/) website, the video tag is inside a div with the class 'bkg-video' wich is inside a div with the class/id "prehome". In the [style.css](https://www.myprovence.fr/dist/css/style.css) there is this: `div.prehome{display:none}` wich is inside of this: `@media screen and (max-width:480px){...`. It means: on devices with screen smaller than 480px the video container `display` is set to `none`. – L777 Feb 12 '16 at 07:58
  • In my opinion that's a bad thing because even invisible 'display:none' do not prevents a content of loading. – L777 Feb 12 '16 at 08:13
  • check answer @Leandro – John Durand Feb 12 '16 at 10:04

1 Answers1

0

So it seems i've been able to target desktop browsers through a media query based on resolution not screen size. Here is the query:

@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:144dpi) {
  .rocky {
    display: none;
  }
}

by doing this, the video doesn't play on iPads/iPhone browsers but still does on desktop browsers. To be honest I can't fully wrap my head around the pro's and con's of using this method, so if someone can provide input your more than welcome :)

John Durand
  • 1,934
  • 5
  • 22
  • 34
  • where can I find the mobile/pc/mac pixel ratio and dpi information? – L777 Feb 12 '16 at 12:25
  • Meaning for specific devices? @Leandro – John Durand Feb 12 '16 at 17:14
  • I mean @media screen size is easy because we have the numbers of each kind of device on our heads already but pixel ratio. [This article](http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio) says that iphone 4S have a pixel ratio of 2. So your example above (1.5) isnt valid for iphone 4S. – L777 Feb 12 '16 at 19:36
  • [this link](http://troy.labs.daum.net/) says that iphone 6plus pixel ratio is equal to 3 (2 times more than your axample above); In this same website, we see that a regular PC screen 1240x800px have the same pixel ratio as the iphone 3gs (wich is 1). – L777 Feb 12 '16 at 19:43
  • and [here](http://dpi.lv/) we see that a pc monitor 1920x1080px (large screen) have the same dpi as the iphone 3gs (tiny screen). – L777 Feb 12 '16 at 19:56
  • well for som reason the video doesn't play on any iPhone or iPad because I've ran every single device on the simulator & so far on every computer i own from a couple dell's to a few matchbook air's and iMac's, it runs ? @freestock.tk – John Durand Feb 13 '16 at 20:14
  • I'm guessing the minimum dpi has something to do with that @freestock.tk – John Durand Feb 13 '16 at 20:14
  • I think youre right: the min pixel ration (1.5) have no effect on iphone 3g (since its 1 on this device), but the min resolution (144dpi) reaches the iphone3g dpi (wich is 163) and blocks the video. – L777 Feb 13 '16 at 21:58
  • But be aware: as seen [here](http://dpi.lv/) some pcs have a dpi higher than 144. Examples: 'Dell UltraSharp P2415Q 23.8″ 3840×2160' and 'Dell UltraSharp P2415Q', both have 185dpi. – L777 Feb 13 '16 at 22:20
  • no i have no problem with any desktop pc's, or laptops playing the videos because their browsers can handle it. It's just the smartphones and tablets ( handhelds) that i don't want the video on because their browsers cannot @freestock.tk – John Durand Feb 13 '16 at 23:12
  • no, I mean If you block the video on devices with dpi higher than 144, some big screen will lose the video aswell. Example 'LG 31MU97 4096×2160' 149dpi. – L777 Feb 13 '16 at 23:36
  • yes, i just realized the iPad Air 2 still has the video there. Is there a query that you believe i can use to separate handhelds from desktops/laptops? @freestock.tk – John Durand Feb 14 '16 at 00:17
  • I know [modernizr](https://modernizr.com/) can detect wich browser the user have and what features of your site are compatible with it... Maybe you can find something there like "disable video on mobile browsers". – L777 Feb 14 '16 at 00:26