YouTube CSS + Downloader (reload page!)

Adds compact CSS style and download button for mobile and desktop site YouTube

目前为 2024-01-09 提交的版本。查看 最新版本

// ==UserScript==
// @name         YouTube CSS + Downloader (reload page!)
// @namespace    http://tampermonkey.net/
// @version      1.6
// @description  Adds compact CSS style and download button for mobile and desktop site YouTube
// @author       Agreasyforkuser
// @match        https://*.youtube.com/*
// @exclude      https://*.youtube.com/tv*
// @icon         https://www.google.com/s2/favicons?domain=youtube.com
// @grant        GM_addStyle
// ==/UserScript==

var currentURL = window.location.href;

//////////////////////// Download Button ///////////////////////////////////////

    'use strict';
    // Function to handle the redirect
    function handleRedirect() {
        // Get the current YouTube video URL
        var currentUrl = window.location.href;
        // Extract the video ID from the URL
        var videoIdMatch = currentUrl.match(/\/watch\?v=([^&]+)/);
        var videoId = videoIdMatch ? videoIdMatch[1] : null;
        if (videoId) {
            // Redirect to the new URL with "pp" added
            var newUrl = 'https://www.youtubepp.com/watch?v=' + videoId;
            // Open the new URL in a new tab
            window.open(newUrl, '_blank');
        }
    }
    // Function to create and append the "Download" button
    function appendDownloadButton() {
        // Create the button element
        var downloadButton = document.createElement('button');
        //downloadButton.innerText = '';
        downloadButton.style.margin = '13px'; // Add some margin for better appearance
        downloadButton.style.color = 'white';
        downloadButton.style.backgroundColor = 'black';
        downloadButton.style.opacity = '0.8';
        downloadButton.style.border = 'none';
        downloadButton.style.cursor = 'pointer'; // Set the cursor to pointer on hov
        downloadButton.addEventListener('click', handleRedirect);
        downloadButton.classList.add('downloadbutton');
        var existingElementMobile = document.querySelector('.slim-owner-bylines');
        var existingElementDesktop = document.querySelector('.ytp-time-display');
        if (existingElementMobile) {
            existingElementMobile.parentNode.insertBefore(downloadButton, existingElementMobile.nextSibling);
        }
        if (existingElementDesktop) {
            existingElementDesktop.parentNode.insertBefore(downloadButton, existingElementDesktop.nextSibling);
        }
    }

    setTimeout(()=>{appendDownloadButton()},1500);

//--------------------------------------------------------------------------------------------------------------------------------
if (currentURL.startsWith("https://www.youtube.com")) {


GM_addStyle(`
             * {border-radius:0px !important}

              .downloadbutton:before {content: "Download 🡇" !important}
              .downloadbutton {border-radius: 6px !important}


              /* transparent searchbar */
              #masthead-container {z-index:0 !important}
              /* placeholder text in searchbar */
              ::-moz-placeholder          {color:transparent !important}
              ::-webkit-input-placeholder {color:transparent !important}

              #search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {opacity:0}
             
              #logo.ytd-masthead:not(:hover) {opacity:0}
              #guide-button.ytd-masthead:not(:hover) {opacity:0}
              #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
              #search-icon-legacy.ytd-searchbox:not(:hover) {background-color: transparent !important}
              #search-icon-legacy.ytd-searchbox:not(:hover) {border-left:none !important}

              #buttons.ytd-masthead:not(:hover) {opacity:0}

              #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
              #container.yt-chip-cloud-renderer:not(:hover) {opacity:0}
               yt-chip-cloud-chip-renderer.yt-chip-cloud-renderer {margin-top: 0 !important; margin-bottom: 0 !important}
               #contents.ytd-rich-grid-renderer {padding-top:0 !important}

              ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
              ytd-comments-header-renderer {margin: 0 !important}
              ytd-mini-guide-entry-renderer[system-icons]:not(:hover) .title.ytd-mini-guide-entry-renderer {opacity:0}

        
              .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--outline {display:none}
              .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}

              /* Channel page transparent upper bar */
              #contentContainer.tp-yt-app-header {opacity:0.9}

              
               .html5-video-player {width:100%}
               .ytp-time-separator {opacity: 0 !important}
               .ytp-title {display: none !important}
               .ytp-gradient-top {display: none !important}
               .ytp-chrome-top-buttons {display: none !important}
               .ytp-fullerscreen-edu-chevron {display: none !important}


               /* compact feed */
               ytd-rich-item-renderer {margin: 0 !important}
               #meta.ytd-rich-grid-media {padding:0 !important}
               ytd-compact-video-renderer.ytd-item-section-renderer {margin: 0 !important}
               ytd-compact-playlist-renderer.ytd-item-section-renderer {margin: 0 !important}
               ytd-compact-video-renderer.ytd-watch-next-secondary-results-renderer:not([expansion="collapsed"]) {margin: 0 !important}

               /* shorts */
               #items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer {padding: 0px !important}
               #rich-shelf-header.ytd-rich-shelf-renderer {margin: 0px !important}
               #dismissible.ytd-rich-shelf-renderer {margin: 0px !important;border: 0px !important}
               /* preview */
               .ytp-inline-preview-ui .ytp-inline-preview-controls {top:0 !important;right:0 !important}
               /*ytd-thumbnail-overlay-time-status-renderer.ytd-thumbnail {margin: 0 !important}*/
               /*#time-status.ytd-thumbnail-overlay-time-status-renderer {color: black !important; background-color: white !important}*/
               /*#time-status.ytd-thumbnail-overlay-time-status-renderer {padding-top: 1px;padding-right: 0px;padding-bottom: 0px;padding-left: 1px;}*/

               /* live chat */
               yt-live-chat-viewer-engagement-message-renderer {display: none !important}
               ytd-live-chat-frame {border:none !important}


              /* likes seperator */
              .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start::after {display:none !important}
              /* no button backgrounds until hover */
              #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background-color:transparent !important}
              #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled {color: black !important; background-color:transparent !important}
              /* Info Card */
              ytd-info-panel-content-renderer[has-menu] {border: none !important}


              /* survey */
              #attached-survey.ytd-rich-grid-media {display: none !important}

              /* hide left green border on subscription button */
              .animated-action__background-container {display: none !important}

              
              #top-row.ytd-watch-metadata:not(:hover) .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading-trailing .yt-spec-button-shape-next__secondary-icon {opacity:0}

              /* padding over video player */
              ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #primary.ytd-watch-flexy, ytd-watch-flexy[default-layout]:not([no-top-margin]):not([reduced-top-margin]) #secondary.ytd-watch-flexy {padding-top:0 !important}


`);


};

//---------------------------------------------------------------------------------------------------------------------------
if (currentURL.startsWith("https://m.youtube.com")) {


GM_addStyle(`
               .downloadbutton:before {content: "Download ⤓" !important}
               .downloadbutton {background: white !important; color: gray !important; margin: 5px !important}

               * {border-radius:0px !important}

                /* dark mode navbar*/
                ytm-pivot-bar-renderer {background: rgba(0,0,0,1) !important;}
                ytm-pivot-bar-renderer c3-icon {color: rgba(255,255,255,1) !important}
               .pivot-bar-item-title {display:none !important}
                ytm-pivot-bar-renderer {border:none !important}

               /* dark mode above/under videoplayer */
               .mobile-topbar-header[data-mode="watch"] {background-color: rgba(0,0,0,1) !important}
               .draggable .engagement-panel-section-list-header-wrapper {background-color: black !important;color: white !important}
               .engagement-panel-drag-line {background: #fff !important}




               /* player */
               #player-control-overlay.fadein .player-controls-background {background: rgba(0,0,0,.3) !important}
               ytm-custom-control .player-controls-top {opacity: .4 !important}
               ytm-custom-control .player-controls-middle {opacity: .7 !important}
               .time-delimiter {opacity: 0 !important}
               ytm-custom-control .player-controls-bottom .icon-button {opacity: 0.8 !important}
               #player-control-overlay .player-controls-background-container {visibility: hidden !important}
                ytm-custom-control .player-controls-middle .player-control-play-pause-icon.icon-button > c3-icon {height: 46px !important; width: 46px !important}
                .YtProgressBarProgressBarPlayheadDot {height: 30px !important; border-radius: 50px !important}

                /* player tip scrubber popup */
                .tooltip-wrapper {display: none !important}

                /* make more space for the video content */
                .player-controls-pb {left: 15px !important; right: 15px !important}
                ytm-custom-control .player-controls-bottom {left: 0 !important; right: 0 !important}
                ytm-custom-control .player-controls-top {top: -8px !important}


              .fullscreen-action-menu {display:none !important}

              .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding-top: 0 !important}
              ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-top: 0 !important}
              .slim-video-action-bar-actions {padding: 0 0 !important}
           
              .ytm-autonav-bar {display:none !important}
              .modern-styling {margin:0 !important}
              .draggable .engagement-panel-section-list-header {padding:0 !important; border: none !important}
              ytm-comments-header-renderer {border:none !important}
              ytm-engagement-panel-section-list-renderer ytm-comment-simplebox-renderer {display: none !important}
              ytm-comment-renderer {padding:0 !important}
              ytm-comment-replies-renderer {margin:0 !important}
              ytm-single-column-watch-next-results-renderer .single-column-watch-next-modern-panels ytm-comments-entry-point-header-renderer.modern-styling {padding: 0 !important}
              ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding-bottom: 0 !important}
              .rich-grid-sticky-header { display: none !important}

              /* landscape comments panel */
              @media (min-width: 931px) and (orientation: landscape) {ytm-engagement-panel {width: 40% !important}}

              /* account avatar, search */
              .topbar-menu-button-avatar-button, ytm-mobile-topbar-renderer ytm-menu .icon-button {display:block !important;}

              /* padding uploader avatar and subscribe button */
              ytm-slim-video-metadata-section-renderer ytm-slim-owner-renderer {padding: 0 !important}
              .slim-owner-profile-icon {margin-right: 2px !important}
              /* Title under player */
              .slim-video-metadata-header .slim-video-information-content.slim-video-information-empty-badge {padding:0 !important}
 
           

              .mobile-topbar-header-endpoint:not(:hover), .logo-in-player-endpoint:not(:hover) {opacity: 0 !important}

              .ytp-unmute-animated .ytp-unmute-icon {border-bottom: none !important;border-radius: 50px !important;background-color: rgba(255, 255, 255, 0.59) !important}
              .ytp-unmute-shrink .ytp-unmute-text {opacity: 0 !important}
              .ytp-unmute-shrink .ytp-unmute-box {width: 0 !important}
              ytm-reel-shelf-renderer .reel-shelf-header {margin:0 !important}
              .chip-bar {display: none !important}



              #logo.ytd-masthead:not(:hover) {opacity:0}
              #guide-button.ytd-masthead:not(:hover) {opacity:0}
              #voice-search-button.ytd-masthead:not(:hover) {opacity:0}
              #buttons.ytd-masthead:not(:hover) {opacity:0}
              #chips-wrapper.ytd-feed-filter-chip-bar-renderer:not(:hover) {opacity:0}
              ytd-comment-simplebox-renderer:not(:hover) {opacity:0}
              ytd-mini-guide-entry-renderer[system-icons] .title.ytd-mini-guide-entry-renderer:not(:hover) {opacity:0}
              yt-button-shape.ytd-subscribe-button-renderer:not(:hover) {opacity:0.07}


              ytm-comment-thread-renderer {padding:0 !important}
              .comment-content {padding: 0 4px !important}

              /* comments panel close button */
              .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {color: gray !important}

              /* Feed */
              ytm-media-item[use-vertical-layout] .details {margin-top: 0 !important}
              ytm-rich-item-renderer ytm-media-item .details {margin-left: 0 !important}
              /* Thumbnail Time */
              ytm-thumbnail-overlay-time-status-renderer {margin-right: 0 !important}
              /* video recommendations under player */
              ytm-single-column-watch-next-results-renderer.full-bleed-wn-thumbs [section-identifier="related-items"] ytm-video-with-context-renderer ytm-media-item .details {margin: 0 !important}

              /* Shorts */
              ytm-reel-shelf-renderer {border: none !important; margin: 0 !important}
              ytm-reel-shelf-renderer .reel-shelf-items > * {margin: 0 !important}

              /* hide left green border on subscription button */
              .animated-action__background-container {display: none !important}

              /* action buttons spacing */
              .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {background: rgba(0,0,0,.05) !important}
              .yt-spec-button-shape-next--size-m {padding: 0 6px !important; height: 32px !important}

             /* description box */
             .draggable ytm-structured-description-content-renderer {padding: 0 !important}

             /* name / views separator */
             .ytm-badge-and-byline-separator {opacity: 0 !important}


`);
}

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址