Skip to content

YouTube Iframe Hover only Interface by ramen

Screenshot of YouTube Iframe Hover only Interface

Details

Authorramen

LicenseNo License

Categoryhttps://www.youtube.com/embed

Created

Updated

Size5.5 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Hide redundant information and reveal them when hovering:
Channel name, Banner, Logo, YT Logo, publicity, feed video recommendations etc

Focus on some features (bottom-center row)
Time display, volume, settings and full screen

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         YouTube Iframe Hover only Interface
@version      20221203.18.57
@namespace    userstyles.world/user/ramen
@description  Hide redundant information and reveal them when hovering:
Channel name, Banner, Logo, YT Logo, publicity, feed video recommendations etc

Focus on some features (bottom-center row)
Time display, volume, settings and full screen
@author       ramen
@license      No License
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Display none */
:is(.ytp-gradient-top
,.ytp-gradient-bottom
,button.ytp-subtitles-button.ytp-button
,button[title="Play on TV"]
,button.ytp-play-button.ytp-button
,.ytp-time-display.notranslate.ytp-time-display-allow-autohide
,button.ytp-remote-button.ytp-button
,.ytp-impression-link){
  display: none !important;
}
:is(button.ytp-fullscreen-button.ytp-button)::after{
  display: none !important;
}

.ytp-chapter-container
,button.ytp-chapter-title{
  display: none !important; /* lol */
}

.ytp-time-display {
    order: -1 !important;
}


}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Show btn on full-screen only */
button.ytp-button.ssBtnYouTube
,.ytp-progress-bar-container,
.ytp-youtube-button{
  display: none !important;
}
.ytp-fullscreen button.ytp-button.ssBtnYouTube{
  display: inline-block !important;
}

.ytp-fullscreen :is(.ytp-progress-bar-container
,.ytp-time-display.notranslate.ytp-time-display-allow-autohide){
  display: block !important;
}

/* center settings menu on full-screen*/
.ytp-big-mode .ytp-settings-menu {
  right: 34.5% !important;
}
.ytp-big-mode .ytp-volume-panel {
  width: 78px !important;
}


/*.ytp-big-mode :is(.ytp-chapter-container
,button.ytp-chapter-title){
  display: block !important;
}*/
.ytp-big-mode button.ytp-chapter-title{
  display: flex !important;
}
}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Visible on hover */
:is(ytp-gradient-bottom
,.ytp-progress-bar-container
,button.ytp-play-button.ytp-button
,button.ytp-mute-button.ytp-button
,.ytp-volume-panel
,button.ytp-fullscreen-button.ytp-button
,.ytp-time-display
,button.ytp-button.ssBtnYouTube
,button.ytp-button.ytp-settings-button.ytp-hd-quality-badge
,button.ytp-subtitles-button.ytp-button
,button.ytp-button.ytp-settings-button
,button:nth-child(7)

,.ytp-chapter-container
,.ytp-chapter-title-content
,button.ytp-chapter-title

,.ytp-cards-teaser){
  opacity: 0 !important;
}



:is(.ytp-progress-bar-container
,button.ytp-play-button.ytp-button
,button.ytp-mute-button.ytp-button
,.ytp-volume-panel
,button.ytp-fullscreen-button.ytp-button
,.ytp-time-display
,button.ytp-button.ssBtnYouTube
,button.ytp-button.ytp-settings-button.ytp-hd-quality-badge
,button.ytp-subtitles-button.ytp-button
,button.ytp-button.ytp-settings-button
,button:nth-child(7)

,.ytp-chapter-container
,.ytp-chapter-title-content
,button.ytp-chapter-title
,a.ytp-title-link.yt-uix-sessionlink

,.ytp-cards-teaser):hover{
  opacity: .9 !important;
}
}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Top Bar */
.ytp-chrome-top{
  justify-content: space-between !important;
}
.ytp-title {
 max-width: fit-content;
}

:is(div.ytp-chrome-top-buttons button
,.ytp-title-channel
,.ytp-title .ytp-title-text a
,.ytp-chrome-top){
  display: none !important;
}


.ytp-fullscreen :is(div.ytp-chrome-top-buttons button
,.ytp-title-channel
,.ytp-title .ytp-title-text a
,.ytp-chrome-top){
  display: unset !important;
}

:is(div.ytp-chrome-top-buttons button
,.ytp-title-channel
,.ytp-title .ytp-title-text a){
  opacity: 0 !important;
}

:is(div.ytp-chrome-top-buttons button
,.ytp-title-channel
,.ytp-title .ytp-title-text a):hover{
  opacity: .9 !important;
}
}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Center controls */
.ytp-exp-bottom-control-flexbox .ytp-chrome-controls {
  justify-content: center !important;
  /*margin-left: -4%;*/
}

/**/
.ytp-right-controls {
  display: flex;
}
.ytp-fullscreen button.ytp-button.ssBtnYouTube {
  display: inline-block !important;
  order: 10;
}

/* left side controls no flex */
.ytp-exp-bottom-control-flexbox .ytp-left-controls{
  flex: none !important;
}

/* always show mute btn */
.ytp-mute-button.ytp-button
,.ytp-volume-panel{
  display: block !important;
}
.ytp-volume-panel {
  width: 52px !important;
  margin-right: 3px !important;
}

/* align snapshot btn */
button.ytp-button.ssBtnYouTube {
    margin-left: 15px !important;
}

/* fulscreen btn always at the end */
button.ytp-fullscreen-button.ytp-button{
  order: 1 !important;
}
.ytp-fullscreen button.ytp-button.ytp-settings-button{
  order: 2 !important;
}


}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Extentions*/
button.ytp-button.ssBtnYouTube- {
    display: inline-block !important;
}
}

@-moz-document url-prefix("https://www.youtube.com/embed/") {
/* Promotions, channels logos and recomendations */
:is(.ytp-paid-content-overlay
,.annotation
,.annotation-type-custom
,.annotation-type-custom.iv-branding
,.ytp-pause-overlay.ytp-scroll-min
,.ytp-ce-element.ytp-ce-element-show

,.ytp-endscreen-content
,button.ytp-button.ytp-endscreen-next
,button.ytp-button.ytp-endscreen-previous){
  display: none !important;
}

}

Reviews

No reviews yet.