Full screen video auto landscape for Android Kiwi Browser

Posted on Edited on

This is for Kiwi Browser on Android, other browsers with user js support might also work.

Below script sets phone to proper full screen mode(hopefully) for video, assuming the phone is in locked portrait mode: portrait for portrait video and landscape for landscape video.

Update on 3/23/2024:

Recent Youtube videos don't go landscape when fullscreen. The problem is on Youtube side -- both stock Chrome 122 and kiwi 124 fails -- as videos don't rotate to landscape automatically, and Youtube WAS one of the few sites that actually take this into consideration and got landscape full screen before recent change.

The script also take care of Youtube.

It uses javascript ScreenOrientation API. For kiwi browser, I use User JavaScript and CSS Violent Monkey extension, TamperMonkey etc.. should also work.

Full script. It's set to match all video sites as I don't notice any side effect.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// ==UserScript==
// @name        Smart Full Screen
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @run-at      document-end
// @author      lucidusdev
// @description 2/24/2024, 12:42:49 PM
// ==/UserScript==

document.addEventListener("fullscreenchange", function (event) {
    if (document.fullscreenElement || document.webkitFullscreenElement) {
        let t = event.target;
        console.info("Enter fullscreen from: ", t);
        let ratio = 1.01;
        let video = t.nodeName.toLowerCase() == 'video' ?
        	t : t.querySelector('video') || null;
        if (!video && t.hasOwnProperty('shadowRoot'))
            video = t.shadowRoot.querySelector('video');
        if (video && video.videoWidth > 0 && video.videoHeight > 0)
        {
           ratio = video.videoWidth / video.videoHeight;
        }
        else if ( t && t.clientWidth > 0 && t.clientHeight > 0)
        {
        	ratio = t.clientWidth/t.clientHeight;
        }

        console.info("Video aspect ratio: ", video, ratio);
        if (screen.orientation && screen.orientation.lock) {
            if (ratio > 1)
                screen.orientation.lock('landscape');
            else
                screen.orientation.lock('portrait');
        }
    } else {
        console.info("Exit fullscreen");
    }
});