☰

YouTube Modern Channel Design

Generate a full width Channel Design on YouTube

目前为 2014-09-28 提交的版本，查看 最新版本。

// ==UserScript==
// @name         YouTube Modern Channel Design
// @version      1.2.1
// @namespace    sapkra
// @description  Generate a full width Channel Design on YouTube
// @match        *://*.youtube.com/user/*
// @grant        none
// ==/UserScript==

//Content Area
document.getElementById('content').setAttribute( 'style', 'width: 100%;' );


//Thumbnails
function setStylesForClass(matchClass, matchTag, styles) {
    var elems = document.getElementsByTagName( '*' ), i;
    
    for (i in elems) {
        if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ') > -1) {
            if(matchTag != '') {
                elems[i].getElementsByTagName( matchTag )[0].setAttribute( 'style', styles );
            }
            else {
                 elems[i].setAttribute( 'style', styles );
            }
        }
    }
}

setStylesForClass( 'yt-shelf-grid-item', '', 'width: 300px;' );
setStylesForClass( 'yt-thumb-196', '', 'width: 300px;' );
setStylesForClass( 'yt-thumb', 'img' , 'width: 300px;' );
setStylesForClass( 'yt-thumb-fluid', 'img' , 'width: 100%;' );
setStylesForClass( 'yt-lockup-title', '' , 'max-width: 300px;' );
setStylesForClass( 'yt-lockup-thumbnail', '' , 'width: 300px;' );

//Banner
function banner_width() {
	var banner_width = document.documentElement.offsetWidth / 320 * 53;
	document.getElementById('c4-header-bg-container').setAttribute('style', 'height: ' + banner_width + 'px;');
}

banner_width();

window.onresize = function(event) {
    banner_width();
};