☰

youtube auto-hide header

youtubeのヘッダーをスクロールから3秒で隠すようにする(画面の狭いタブレット向け)

Versión del día 22/10/2020. Echa un vistazo a la versión más reciente.

// ==UserScript==
// @name         youtube auto-hide header
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  youtubeのヘッダーをスクロールから3秒で隠すようにする(画面の狭いタブレット向け)
// @author       y_kahou
// @match        https://www.youtube.com/*
// @grant        none
// @noframes
// ==/UserScript==

function __css__() {/*
#masthead-container.auto-hide {
    transition: transform 0.5s linear;
    transform: translateY(-100%);
}
*/}
function addStyle() {
    // cssを埋め込む先人の知恵
    var css = (__css__).toString()
        .match(/[^]*\/\*([^]*)\*\/\}$/)[1]
        .replace(/\{\*/g, '/*')
        .replace(/\*\}/g, '*/');

    var elm = document.createElement('style');
    elm.type = 'text/css';
    elm.appendChild(document.createTextNode(css));

    document.getElementsByTagName('head')[0].appendChild(elm);
}
(function() {
    'use strict';
    // Your code here...
    addStyle();

    var header = document.getElementById('masthead-container');
    var HIDE_AT = 3000;
    var interval;
    var autoHide = () => {
        if (document.querySelectorAll('input#search')[0] != document.activeElement) {
            header.classList.add("auto-hide");
        }
    }
    autoHide();

    window.onscroll = function() {
        header.classList.remove("auto-hide");
        clearTimeout(interval);
        interval = setTimeout(autoHide, HIDE_AT);
    }

    document.querySelectorAll('input#search')[0].addEventListener('blur', () => {
        header.classList.add("auto-hide");
    })

    var hight = header.clientHeight;
    document.getElementsByTagName('ytd-app')[0].style.marginTop = `-${hight}px`

})();