2

On my website, currently when you load it, it plays a video automatically then fades in to the website. But due to mobile phone data rules, it cannot automatically play on phones. How do I make the video not even show up on mobile views? Will it to with the CSS @media ?

  • Yes, target the html element that contains the video using media queries and selecting `display: none;` – mencina Sep 02 '14 at 20:55
  • I would use https://github.com/serbanghita/Mobile-Detect - that way it won't load. Using css (display:none) with media queries or without still loads it, but it's just not visible. – Christina Sep 02 '14 at 21:02
  • Mobile includes tablets that equal resolutions that match desktops, so using CSS is not the way to go. – Christina Sep 02 '14 at 21:04

2 Answers2

0

Your best bet is to wrap it in a class (for the sake of this example, I'll call it show-desktop.

Here is how you would structure your media query:

@media screen and (max-width:767px){
  .show-desktop{
     display:none;
   }
}

This makes the contents of the class show-desktop hidden when the size of the device is 767 pixels or smaller.

Aibrean
  • 6,297
  • 1
  • 22
  • 38
0

I see at least two options:

1.Detect mobile browser with JavaScript. Link here:
javascript - How to detect mobile device and get user agent info send and save that information to database on server, only once? - Stack Overflow
2. Use @media queries. Link here:
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website | Smashing Magazine

Community
  • 1
  • 1
Oskars Pakers
  • 699
  • 3
  • 11