HTML5 video not displaying on iPad Pro landscape

Question

I have a problem with a HTML5 <video> on the iPad Pro.

It displays in portrait but doesn't display in landscape.

Does anyone have any ideas? I am really stuck here, so your help would be really appreciated.

I have included the video code below.

 <video autoplay poster="<?=$this->getThemePath() ?>/images/video-poster.jpg" id="bgvid" class="hidden-xs hidden-sm hidden-md" onended="run()">display: block;
        <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>

    <div id="controls">
        <ul>
            <li><button onclick="run()"><i class="fa fa-step-forward"></i></button></li>
            <li><button id="#pause" onclick="vidplay()"><i class="fa fa-pause"></i></button></li>
        <ul>
    </div>

Added media query:

    /*** Disable animations on mobile/tablet portrait ***/

@media only screen and (max-width : 768px) {
  .animated {
    /*CSS transitions*/
    -o-transition-property: none !important;
    -moz-transition-property: none !important;
    -ms-transition-property: none !important;
    -webkit-transition-property: none !important;
    transition-property: none !important;
    /*CSS transforms*/
    -o-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    /*CSS animations*/
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -o-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
  }

  .ani-not-visible {
    visibility: visible !important;
  }

}

Just found these:

    @media (max-width: 993px){
  video {
    display: none;
  }
}


video {
  width: 100% !important;
  height: auto !important;
}