Hiding Elements on Certain Devices

Mobile
1

I have a full-width video that auto-plays at the heading of a Hype web page. It looks great when the browser can play auto-play videos, but when viewing it on an iPad, it just displays as a play button. I set the element ID of the video to ‘video1’ and have it so, on-scene-load, the following JS runs:

if( navigator.platform === 'iPad' ){

hypeDocument.getElementById('video1').style.display = 'none';

}

In place of the video, I took some screenshots from the video and made it into a slideshow. Now my problem is that the slideshow plays on any device, including on a desktop computer… A less-than-ideal fix is to add the slideshow behind the video, so if the video can be played, it covers the slideshow, but if it can’t be played, the slideshow will show, but the problem with that is that the video is 9.8MB and already takes up a lot of bandwidth, and to have 7-8 pictures constantly moving while the video is looping slows it down even more. Is there some way of only showing the slideshow if “video1” cannot be played?

2

There probably is, with a file/example it’d be easier to determine.

Maybe you can just show the element you want?

if( navigator.platform === 'iPad' ){
  hypeDocument.getElementById('video1').style.display = 'none';
  hypeDocument.getElementById('slideshow').style.display = 'block';
}
else
{
    hypeDocument.getElementById('video1').style.display = 'block';
    hypeDocument.getElementById('slideshow').style.display = 'none';
}
3

You can use also CSS only with several filters.
Landscape / portrait, Pixel ratio and so on.

Example:

  <style>   /* ----------- iPhone 4 and 4S ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2) {
.hide_your_element_class { display: none !important  }    

    }    </style>

Full list of MediaQuery here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
retina: https://css-tricks.com/snippets/css/retina-display-media-query/

4

Android Chrome also doesn't support autoplay. Do I have to create a separate function, or can I include another line within the same Hype JS function like this:

if( navigator.platform === 'Android' ){
  hypeDocument.getElementById('video1').style.display = 'none';
  hypeDocument.getElementById('slideshow').style.display = 'block';
}