☰

Auto-Rotate Video Fullscreen

Automatically rotate device to landscape when a fullscreen video is in landscape orientation only

  1. // ==UserScript==
  2. // @name         Auto-Rotate Video Fullscreen
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Automatically rotate device to landscape when a fullscreen video is in landscape orientation only
  6. // @match        *://*/*
  7. // @grant        window.orientation
  8. // @grant        window.screen
  9. // @run-at       document-start
  10. // @license     MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Check if an element is in full screen
  17.     function isFullScreen(element) {
  18.         return (
  19.             document.fullscreenElement === element ||
  20.             document.webkitFullscreenElement === element ||
  21.             document.mozFullScreenElement === element ||
  22.             document.msFullscreenElement === element ||
  23.             element.webkitDisplayingFullscreen ||
  24.             element.fullscreen
  25.         );
  26.     }
  27.  
  28.     // Attempt screen rotation
  29.     function rotateScreen(landscape) {
  30.         try {
  31.             // Method 1: Screen Orientation API
  32.             if (screen.orientation && screen.orientation.lock) {
  33.                 screen.orientation.lock(landscape ? 'landscape-primary' : 'portrait-primary')
  34.                     .catch(() => {});
  35.             }
  36.  
  37.             // Method 2: Explicit window.orientation manipulation
  38.             if (window.orientation !== undefined) {
  39.                 window.orientation = landscape ? 90 : 0;
  40.             }
  41.         } catch (error) {
  42.             // Silently handle rotation errors
  43.         }
  44.     }
  45.  
  46.     // Fullscreen change handler with landscape video check
  47.     function handleFullscreenChange(event) {
  48.         // Get the current fullscreen element (if any)
  49.         let fullscreenElement = document.fullscreenElement ||
  50.             document.webkitFullscreenElement ||
  51.             document.mozFullScreenElement ||
  52.             document.msFullscreenElement;
  53.  
  54.         if (fullscreenElement) {
  55.             // We're entering fullscreen. Try to get a video element.
  56.             let videoElement = null;
  57.             if (fullscreenElement.tagName.toLowerCase() === 'video') {
  58.                 videoElement = fullscreenElement;
  59.             } else {
  60.                 videoElement = fullscreenElement.querySelector('video');
  61.             }
  62.  
  63.             // Only rotate if a video element exists and it's landscape (width > height)
  64.             if (videoElement && videoElement.videoWidth > videoElement.videoHeight) {
  65.                 // Store that we rotated because of a landscape video
  66.                 window.__isLandscapeVideoFullscreen = true;
  67.                 rotateScreen(true);
  68.             } else {
  69.                 // Do nothing for portrait videos or if no video found
  70.                 window.__isLandscapeVideoFullscreen = false;
  71.             }
  72.         } else {
  73.             // Exiting fullscreen: if we had rotated for a landscape video, revert to portrait.
  74.             if (window.__isLandscapeVideoFullscreen) {
  75.                 rotateScreen(false);
  76.                 window.__isLandscapeVideoFullscreen = false;
  77.             }
  78.         }
  79.     }
  80.  
  81.     // Add fullscreen listeners to an element
  82.     function addFullscreenListeners(element) {
  83.         element.addEventListener('fullscreenchange', handleFullscreenChange);
  84.         element.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  85.         element.addEventListener('mozfullscreenchange', handleFullscreenChange);
  86.         element.addEventListener('MSFullscreenChange', handleFullscreenChange);
  87.     }
  88.  
  89.     // Initial setup function
  90.     function init() {
  91.         // Add global fullscreen listeners
  92.         document.addEventListener('fullscreenchange', handleFullscreenChange);
  93.         document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
  94.         document.addEventListener('mozfullscreenchange', handleFullscreenChange);
  95.         document.addEventListener('MSFullscreenChange', handleFullscreenChange);
  96.  
  97.         // Find and add listeners to existing video and iframe elements
  98.         const videoElements = document.querySelectorAll('video, iframe');
  99.         videoElements.forEach(video => {
  100.             addFullscreenListeners(video);
  101.         });
  102.  
  103.         // Observe for dynamically added video elements
  104.         const observer = new MutationObserver((mutations) => {
  105.             mutations.forEach((mutation) => {
  106.                 if (mutation.type === 'childList') {
  107.                     mutation.addedNodes.forEach((node) => {
  108.                         if (node.nodeType === Node.ELEMENT_NODE) {
  109.                             const videos = node.querySelectorAll('video, iframe');
  110.                             if (videos.length > 0) {
  111.                                 videos.forEach(video => {
  112.                                     addFullscreenListeners(video);
  113.                                 });
  114.                             }
  115.                         }
  116.                     });
  117.                 }
  118.             });
  119.         });
  120.  
  121.         // Start observing the entire document
  122.         observer.observe(document.documentElement, {
  123.             childList: true,
  124.             subtree: true
  125.         });
  126.     }
  127.  
  128.     // Run initialization
  129.     if (document.readyState === 'loading') {
  130.         document.addEventListener('DOMContentLoaded', init);
  131.     } else {
  132.         init();
  133.     }
  134. })();