I built a Progressive Web Application (PWA) that specifies "orientation": "portrait" in it's Manifest file.

This ensures that the application is displayed in portrait mode no matter how the phone is held (at least with Chrome).

This is fine for nearly all situations for my application, but there are situations where an embedded YouTube video is shown (iframe embedding API). When placing the video into fullscreen mode, the video is displayed in portrait mode, which is not useful.

Can I change the desired screen orientation via JavaScript? Or at least "unlock" the orientation so that the manifest setting is temporarily disabled?

I built a Progressive Web Application (PWA) that specifies "orientation": "portrait" in it's Manifest file.

This ensures that the application is displayed in portrait mode no matter how the phone is held (at least with Chrome).

This is fine for nearly all situations for my application, but there are situations where an embedded YouTube video is shown (iframe embedding API). When placing the video into fullscreen mode, the video is displayed in portrait mode, which is not useful.

Can I change the desired screen orientation via JavaScript? Or at least "unlock" the orientation so that the manifest setting is temporarily disabled?

• javascript
• android
• google-chrome
• screen-orientation

Share Follow edited Mar 19, 2023 at 11:21 Walter Monroe 32011 silver badge1111 bronze badges asked Apr 2, 2017 at 16:16 Udo GUdo G 13.2k1616 gold badges6363 silver badges9292 bronze badges 2

• Have similar problem with fullscreen video in a PWA. Did you find any solution yet? – t1gor Commented Jul 8, 2019 at 7:53
• nope, unfortunately – Udo G Commented Jul 8, 2019 at 11:38

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

What we ended up doing is removing "orientation" property pletely from manifest.json. That would allow full screen video with rotations. I guess if you really want to leave only "portrait" orientation in the rest of the app, you can lock it with JS using the screen.orientation API: https://caniuse./#feat=screen-orientation (81.82% supported):

// to lock portrait
ScreenOrientation.lock("portrait");

// and then allow any
ScreenOrientation.unlock();

Please note, that this is still a working draft, not a live spec. Some more docs and info from Mozilla. Hope that helps.