Make YouTube No Controls when you move cursor outside the video.
/* ==UserStyle==
@name YouTube No Cursor No Controls
@namespace github.com/openstyles/stylus
@version 0.1.2
@description Make YouTube No Controls when you move cursor outside the video.
@author CY Fung
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/watch?v="),
url-prefix("https://www.youtube.com/embed/")
{
/* Insert code here... */
/* ytp-autohide -> .html5-video-player:not(:hover) */
/*
.html5-video-player:not(:hover) {
cursor: none
}*/
.html5-video-player:not(:hover) .ytp-player-content:not(.html5-endscreen),.html5-video-player:not(:hover) .ytp-player-content:not(.ytp-upnext),.ytp-hide-info-bar .ytp-player-content {
top: 0;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1),top .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1),top .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1),top .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .ytp-ypc-player-content,.ytp-hide-controls .ytp-player-content {
bottom: 0
}
.html5-video-player:not(:hover):not(.ytp-ad-overlay-open) .ytp-iv-player-content,.ytp-hide-controls .ytp-iv-player-content {
bottom: 12px
}
.ytp-big-mode.html5-video-player:not(:hover):not(.ytp-ad-overlay-open) .ytp-iv-player-content,.ytp-big-mode.ytp-hide-controls .ytp-iv-player-content {
bottom: 24px
}
.html5-video-player:not(:hover) .ytp-playlist-menu-button,.html5-video-player:not(:hover) .ytp-back-button,.html5-video-player:not(:hover) .ytp-title-channel,.html5-video-player:not(:hover) .ytp-title,.html5-video-player:not(:hover) .ytp-chrome-top .ytp-watch-later-button,.html5-video-player:not(:hover) .ytp-chrome-top .ytp-share-button,.html5-video-player:not(:hover) .ytp-chrome-top .ytp-copylink-button,.html5-video-player:not(:hover):not(.ytp-cards-teaser-shown) .ytp-cards-button,.html5-video-player:not(:hover) .ytp-overflow-button,.html5-video-player:not(:hover) .ytp-chrome-bottom,.ytp-chrome-top[aria-hidden=true],.ytp-chrome-bottom[aria-hidden=true] {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: opacity .1s cubic-bezier(.4,0,1,1);
transition: opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-playlist-menu-button,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-back-button,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-title-channel,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-title,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-chrome-top .ytp-watch-later-button,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-chrome-top .ytp-share-button,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active):not(.ytp-cards-teaser-shown) .ytp-cards-button,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-overflow-button {
display: none
}
.ytp-gradient-top[aria-hidden=true],.ytp-gradient-bottom[aria-hidden=true],.html5-video-player:not(:hover) .ytp-gradient-top,.html5-video-player:not(:hover) .ytp-gradient-bottom {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: opacity .1s cubic-bezier(.4,0,1,1);
transition: opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-gradient-top,.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-gradient-bottom {
display: none
}
.ad-showing.html5-video-player:not(:hover) .video-ad-status-bar,.ad-showing.ytp-hide-controls .video-ad-status-bar {
bottom: 0
}
.html5-video-player:not(:hover).ytp-ad-overlay-closed .ad-overlay {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1)
}
.ytp-hide-controls .ytp-ad-player-overlay-instream-info,.ytp-hide-controls .ytp-ad-survey-player-overlay-instream-info,.html5-video-player:not(:hover) .ytp-ad-player-overlay-instream-info,.html5-video-player:not(:hover) .ytp-ad-survey-player-overlay-instream-info,.ytp-iv-drawer-open .ytp-ad-player-overlay-instream-info,.ytp-iv-drawer-open .ytp-ad-survey-player-overlay-instream-info,.ytp-embed.ytp-hide-controls .ytp-ad-player-overlay-instream-info,.ytp-embed.ytp-hide-controls .ytp-ad-survey-player-overlay-instream-info,.ytp-embed.html5-video-player:not(:hover) .ytp-ad-player-overlay-instream-info,.ytp-embed.html5-video-player:not(:hover) .ytp-ad-survey-player-overlay-instream-info,.ytp-embed.ytp-iv-drawer-open .ytp-ad-player-overlay-instream-info,.ytp-embed.ytp-iv-drawer-open .ytp-ad-survey-player-overlay-instream-info {
bottom: 6px;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover).ytp-ad-overlay-closed .ytp-ad-overlay-slot {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .ytp-ad-persistent-progress-bar-container,.ytp-ad-player-overlay-progress-bar .ytp-ad-persistent-progress-bar-container {
opacity: 1;
bottom: 0;
-webkit-transition: bottom .25s cubic-bezier(0,0,.2,1),opacity .25s cubic-bezier(0,0,.2,1);
-o-transition: bottom .25s cubic-bezier(0,0,.2,1),opacity .25s cubic-bezier(0,0,.2,1);
transition: bottom .25s cubic-bezier(0,0,.2,1),opacity .25s cubic-bezier(0,0,.2,1)
}
.html5-video-player:not(:hover) .iv-promo-website-card-cta-redesign.iv-promo-collapsed .iv-promo-img {
opacity: .8;
-webkit-transition: transform .2s cubic-bezier(0,0,.2,1),-webkit-transform .2s cubic-bezier(0,0,.2,1),opacity .2s cubic-bezier(.4,0,1,1) .8s;
transition: transform .2s cubic-bezier(0,0,.2,1),-webkit-transform .2s cubic-bezier(0,0,.2,1),opacity .2s cubic-bezier(.4,0,1,1) .8s
}
.html5-video-player:not(:hover).ytp-embed-overlays-autohide .iv-drawer {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: opacity .1s cubic-bezier(.4,0,1,1);
transition: opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active).ytp-embed-overlays-autohide .iv-drawer {
display: none
}
.html5-video-player:not(:hover) .iv-drawer-content::-webkit-scrollbar-thumb {
background-color: transparent
}
.html5-video-player:not(:hover):not(.ytp-cards-teaser-shown) .ytp-cards-teaser,.ytp-iv-drawer-open .ytp-cards-teaser {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1) .33s;
-o-transition: opacity .1s cubic-bezier(.4,0,1,1) .33s;
transition: opacity .1s cubic-bezier(.4,0,1,1) .33s
}
.html5-video-player:not(:hover).ytp-embed-overlays-autohide.ytp-contextmenu {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: opacity .1s cubic-bezier(.4,0,1,1);
transition: opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active).ytp-embed-overlays-autohide.ytp-contextmenu {
display: none
}
.html5-video-player:not(:hover):not(.ytp-mweb-player) .ytp-watermark:not(.ytp-muted-autoplay-watermark) {
opacity: 0;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1)
}
.ytp-big-mode.html5-video-player:not(:hover) .ytp-info-panel-preview,.ytp-big-mode.ytp-hide-info-bar .ytp-info-panel-preview,.ytp-embed.html5-video-player:not(:hover) .ytp-info-panel-preview,.ytp-embed.ytp-hide-info-bar .ytp-info-panel-preview {
top: 12px
}
.ytp-inline-preview-mode.html5-video-player:not(:hover) .ytp-time-display {
display: none
}
.ytp-inline-preview-mode.html5-video-player:not(:hover) .ytp-inline-preview-scrim {
opacity: 0
}
#inline-preview-player.html5-video-player:not(:hover) .caption-window.ytp-caption-window-bottom {
margin-bottom: 12px
}
.html5-video-player:not(:hover) .ytp-offline-slate-bar,.ytp-hide-controls .ytp-offline-slate-bar {
bottom: 12px;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .ytp-big-mode .ytp-offline-slate-bar,.ytp-hide-controls .ytp-big-mode .ytp-offline-slate-bar {
bottom: 18px
}
.html5-video-player:not(:hover).ytp-embed-overlays-autohide .ytp-overflow-panel {
opacity: 0;
-webkit-transition: opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: opacity .1s cubic-bezier(.4,0,1,1);
transition: opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active).ytp-embed-overlays-autohide .ytp-overflow-panel {
display: none
}
.ytp-exp-ppp-update.ytp-big-mode.html5-video-player:not(:hover) .ytp-paid-content-overlay,.ytp-exp-ppp-update.ytp-big-mode.ytp-hide-info-bar .ytp-paid-content-overlay,.ytp-exp-ppp-update.ytp-embed.html5-video-player:not(:hover) .ytp-paid-content-overlay,.ytp-exp-ppp-update.ytp-embed.ytp-hide-info-bar .ytp-paid-content-overlay {
top: 16px
}
.html5-video-player:not(:hover) .ytp-paid-content-overlay,.ytp-iv-drawer-open .ytp-paid-content-overlay {
bottom: 6px;
-webkit-transition: bottom .1s cubic-bezier(.4,0,1,1);
-o-transition: bottom .1s cubic-bezier(.4,0,1,1);
transition: bottom .1s cubic-bezier(.4,0,1,1)
}
.ytp-big-mode.html5-video-player:not(:hover) .ytp-paid-content-overlay,.ytp-big-mode.ytp-iv-drawer-open .ytp-paid-content-overlay {
bottom: 12px
}
.html5-video-player:not(:hover):not(.html5-video-player:not(:hover)-active) .ytp-chrome-top .ytp-shorts-title-channel {
margin-top: 7px
}
.html5-video-player:not(:hover) .ytp-webgl-spherical-control,.ytp-hide-info-bar .ytp-webgl-spherical-control {
top: 12px;
-webkit-transition: top .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
-o-transition: top .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1);
transition: top .1s cubic-bezier(.4,0,1,1),opacity .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .caption-window.ytp-caption-window-top,.ytp-hide-info-bar .caption-window.ytp-caption-window-top {
margin-top: 0;
-webkit-transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1);
-o-transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1);
transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .caption-window.ytp-caption-window-bottom,.ytp-hide-controls .caption-window.ytp-caption-window-bottom,.ytp-muted-autoplay .caption-window.ytp-caption-window-bottom {
margin-bottom: 0;
-webkit-transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1);
-o-transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1);
transition: margin-bottom .1s cubic-bezier(.4,0,1,1),margin-top .1s cubic-bezier(.4,0,1,1)
}
.html5-video-player:not(:hover) .ytp-unmute,.ytp-hide-info-bar .ytp-unmute {
top: 0
}
}