主題

[Firefox] 變更Youtube 影片的顯示數量及取消影片的圓角矩形

高木秋人 | 2022-11-04 14:18:24 | 巴幣 0 | 人氣 794

Youtube 頻道的影片分類底下的影片，不知道什麼時候，好像有改過版？

從原本的一列可以顯示五支影片，變成一列只能顯示四支影片，影片的尺寸也被放大了

Youtube 改版前的畫面，我没有截圖到，所以我們直接看改版後的畫面

畫面中你可以看到，它一列只能顯示四支影片，感覺好像有些浪費空間

假如你想要把影片塞好塞滿，可以在同一列裡面塞進八支影片，像下圖這樣的效果：

我先假設你可能會問，一列塞八支影片太多了，我可不可以塞五個或六個就好？

答案是不可以喔

我的方法是修改網頁的樣式，而不是網頁的結構，所以只能在既有的結構上做些彈性變化

如果你是要修改網頁的結構，油猴的腳本會更適合

現在油猴可能還没有這樣的腳本，所以不妨先把它當作一個臨時的應對方式

由於我們受限於 Youtube 的網頁結構，在它的樣式中，一個區塊裡面就放了四支影片

如果要在同一列放兩個區塊來增加影片數量，那就只能是八支影片了

接下來我要做的事，都是以 Firefox 瀏覽器為主，因為這是我自己慣用的瀏覽器

我們只需要按照步驟下載安裝一個名稱為 Stylus 的擴充套件，然後貼上代碼就搞定收工了

先打開瀏覽器然後依照步驟進入擴充套件的管理介面

然後直接搜尋 Stylus

應該會找到這個結果，直接安裝它吧

然後回到擴充套件的管理介面，依照步驟進入編寫代碼的介面

步驟 7，是為你編輯的樣式取一個自己容易理解的名字，下面兩個選項都勾選

步驟 8 跟步驟 9 是設定可以讓樣式代碼生效的網址

最後只要貼上代碼就可以了

代碼在這裡喔，貼上後記得儲存代碼

這裡是讓影片可以一列變成八個的代碼：

CSS 樣式代碼

/* Youtube 頻道 - 影片分類 - 增加影片列的數量 */
ytd-rich-grid-row {
     width: 50%;
     display: flex;
     justify-content: center;
}
/* Youtube 頻道 - 影片分類寬度調整 */
#contents.ytd-rich-grid-renderer {
     width: 1503px;
}

/* Youtube 首頁 - 寬度調整 */
#content.ytd-rich-section-renderer {
     max-width: 100%;
     margin: 0 24px 0 24px;
     width: 100%;
}

這裡是讓影片取消圓角矩形的代碼：

CSS 樣式代碼

/* 取消影片圓角矩形 */
/* Youtube 頻道首頁 - 最熱門影片 */
ytd-channel-video-player-renderer[rounded] #player.ytd-channel-video-player-renderer {
    border-radius: 0px;
}
/* Youtube 頻道首頁 - 影片列表 */
ytd-thumbnail[size="medium"] a.ytd-thumbnail,
ytd-thumbnail[size="medium"]::before {
    border-radius: 0px;
}
/* Youtube 頻道 - 影片分類 */
ytd-thumbnail[size="large"] a.ytd-thumbnail,
ytd-thumbnail[size="large"]::before {
    border-radius: 0px;
}
/* Shorts 播放頁面 */
.player-container.ytd-reel-video-renderer {
    border-radius: 0px;
}
/* Youtube 頻道 - 社群頁面 */
ytd-backstage-image-renderer[rounded] #image-container.ytd-backstage-image-renderer {
    border-radius: 0px;
}