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. })();