Why isn't this video showing on iPad Pro landscape?

Question

I have a standard HTML5 <video> on my website.

The videos work well on most devices, except from iPad Pro in landscape orientation. It works in portrait orientation.

Here is the video code:

<video autoplay poster="<?=$this->getThemePath() ?>/images/video-poster.jpg" id="bgvid" class="hidden-xs hidden-sm hidden-md" onended="run()">
            <source  type="video/mp4">
        </video>

        <script>

        video_count = getRandomizer( 1, 7 );            
        videoPlayer = document.getElementById("bgvid");

        window.onload = function () { 
        run();
        }


        function getRandomizer(min, max) {
          return Math.floor(Math.random() * (max - min)) + min;
        }

        function run(){
                // alert (video_count);
                video_count++;
                if (video_count == 9) video_count = 1;
                var nextVideo = "/doodles/"+video_count+".mp4";
                videoPlayer.src = nextVideo;
                videoPlayer.play();
       };

         $('#bgvid').click(function(){
            this.paused?this.play():this.pause();
         });
        </script>

        <script type="text/javascript">
            function vidplay() {
               var video = document.getElementById("bgvid");
               var button = document.getElementById("pause");
               if (video.paused) {
                  video.play();
                  button.html("<i class='fa fa-play'></i>");
               } else {
                  video.pause();
                  button.html("<i class='fa fa-pause'></i>");
               }
            }  
        </script>

What are your suggestions? Do I need to use some sort of device detection JS or jQuery?

All help is much appreciated :)

Answer 1

You have to remove some class names from your video element:

class="hidden-xs"

now it will be hidden if the device's screen width could be smaller than iPad's width in landscape mode.