YouTube Modern Channel Design

Generate a full width Channel Design on YouTube

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

You will need to install an extension such as Tampermonkey to install this script.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

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

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


//Thumbnails
function setStylesForClass(matchClasses, matchTag, styles) {
    var classes = matchClasses.split( ', ' );
    var elems = document.getElementsByClassName( classes[0] );
    
    for (var i = 0; i < elems.length; i++) {
        if(matchTag == 'multipleClasses') {
            elems[i].getElementsByClassName( classes[1] )[0].setAttribute( 'style', styles );
        }
        else 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-lockup-title', '' , 'max-width: 300px;' );
setStylesForClass( 'expanded-shelf-content-item fluid yt-lockup-tile, yt-lockup-thumbnail', 'multipleClasses' , 'width: 300px;' );
setStylesForClass( 'yt-lockup clearfix  yt-lockup-video yt-lockup-grid', 'img' , 'width: 300px;' );
setStylesForClass( 'yt-lockup clearfix  yt-lockup-playlist yt-lockup-grid', 'img' , 'width: 300px;' );
setStylesForClass( 'yt-lockup-thumbnail', '' , 'width: 300px;' );
setStylesForClass( 'yt-thumb-default', 'img' , 'width: 300px;' );
setStylesForClass( 'yt-thumb-fluid', 'img' , 'width: 100%;' );

//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();
};