How to hide the browser address bar on orientation change in mobile browsers?

Question

I have a video embedded on a website and similiar to the youtube app's behavior to go to fullscreen in landscape mode I wanted to do that with javascript. I know you can't use the fullscreen api without clicking a button because of safety reasons and you can't force to hide the address bar but isn't there any workaround for this?

I found this article and tried to fire the scrolldown function on orientation change but it didn't work. I also changed the variables to a higher timeout and a lower position and also tried another scroll function:

$('html, body').animate({scrollTop: 100}, 100);

Still no effect...

This is the code:

Javascript Orientation Change function:

updateOrientation: function() {
    orientation = $(window).width() / $(window ).height() < 1 ? 'portrait' : 'landscape';
    var device_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        device_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
        new_width,
        new_height;
    if(orientation === 'landscape'){
        new_width = device_width;
        new_height = device_height;
        if($('#videoPlayer').length > 0 && $(window).scrollTop() < 50){
            $('html, body').animate({scrollTop: 100}, 100); //this should hide the address bar
        }
    }else{
        //code when switching back to portrait
        ...
    }
    $('#videoPlayer').css({
        'width': new_width,
        'height': new_height
    });
}

CSS:

@media screen and (orientation:landscape){
   article #videoPlayer{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height:100vh;
   }
   article #videoPlayer{
      background-color: #000;
   }
   video {
      object-fit: contain;
   }
   body.player_initialized #sticky_navigation{
      display: none;
   }
}

I checked several Stackoverflow entries but didn't find a working solution. Anyone knows the answer to this or has a hint?

Edit: The scrolldown workaround seems to work for mobile IOS Safari but not for mobile Chrome.

score 0 · Answer 1 · answered Sep 29 '17 at 10:47

There is a screen orientation API and a Fullscreen API, which can work hand in hand. It's not supported by Safari but works in most Android Browsers:

if('orientation' in screen){
    window.screen.orientation.onchange = function() {
          if (this.type.startsWith('landscape') && document.querySelector('#element').webkitRequestFullScreen) {
            document.querySelector('#element').webkitRequestFullscreen();
          } else {
            if(document.webkitCancelFullScreen){
                document.webkitExitFullscreen();
            }
          }
    }
}

How to hide the browser address bar on orientation change in mobile browsers?

1 Answers1