☰

YouTube Simple Cinema Mode

While video is playing the page will turn dark automatically, giving focus to the video.

  1. /* ==UserStyle==
  2. @name YouTube Simple Cinema Mode
  3. @namespace q1k
  4. @type less
  5. @description While video is playing the page will turn dark automatically, giving focus to the video.
  6. @version 1.0.1
  7. @advanced text opacity "Overlay opacity [0 - 1]" "0.85"
  8. ==/UserStyle== */
  9.  
  10. @-moz-document domain("youtube.com") {
  11.   #movie_player.playing-mode, #movie_player, #movie_player.playing-mode > *, #movie_player > *, #movie_player.seeking-mode {
  12.     z-index: 2000000000 !important; /*2147483646*/
  13.   }
  14.   #player .player-api {
  15.     z-index: auto !important;
  16.   }
  17.   .ytp-contextmenu,
  18.   .yt-uix-clickcard-card,
  19.   #appbar-guide-menu,
  20.   #movie_player > .ytp-tooltip,
  21.   #yt-uix-videoactionmenu-menu,
  22.   paper-dialog.ytd-popup-container[role="dialog"]
  23.   {
  24.     z-index: 2147483647 !important;
  25.   }
  26.   #movie_player:before {
  27.     content: "";
  28.     position: fixed !important;
  29.     top: 0;
  30.     left: 0;
  31.     width: 110vw;
  32.     height: 110vh;
  33.     background: rgba(0, 0, 0, /*[[opacity]]*/);
  34.     opacity: 0;
  35.     transition: opacity 0.5s ease-in-out;
  36.     pointer-events: none;
  37.     z-index: 1999999999; /*2147483645*/
  38.   }
  39.   #movie_player.playing-mode:before,
  40.   #movie_player.seeking-mode:before {
  41.     opacity: 1;
  42.     transition: opacity 0.5s ease-in-out;
  43.   }
  44.   
  45.   /*fix*/
  46.   #movie_player {
  47.     contain: none;
  48.   }
  49.   #movie_player {
  50.     overflow: unset;
  51.   }
  52.   #movie_player.ended-mode .html5-video-container {
  53.     visibility: hidden;
  54.   }
  55.   #player ~ #content,
  56.   .ytp-iv-video-content {
  57.     pointer-events: none;
  58.   }
  59.   #player ~ #content > *,
  60.   .ytp-iv-video-content > * {
  61.     pointer-events: auto;
  62.   }
  63.   
  64. }