主題

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

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

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

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

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

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

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

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

~~答案是不可以喔~~

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

更新後，新的方法已經可以自訂數量了，我現(xiàn)在是改成一列 7 個。

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

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

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

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

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

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

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

然後直接搜尋 Stylus

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

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

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

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

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

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

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

2024/08/04 15:15:41 更新 1 （原方法好像失效了？所以更新）

CSS 樣式代碼

/* Youtube 頻道 - 影片分類 - 增加影片列的數量（８：表示每行放８部影片） */
html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-browse.style-scope.ytd-page-manager ytd-two-column-browse-results-renderer.style-scope.ytd-browse.grid.grid-6-columns div#primary.style-scope.ytd-two-column-browse-results-renderer ytd-rich-grid-renderer.style-scope.ytd-two-column-browse-results-renderer div#contents.style-scope.ytd-rich-grid-renderer ytd-rich-item-renderer.style-scope.ytd-rich-grid-renderer
{
    --ytd-rich-grid-items-per-row: 8;
}

/* Youtube 首頁 - 增加影片列的數量（８：表示每行放８部影片） */
html body ytd-app div#content.style-scope.ytd-app ytd-page-manager#page-manager.style-scope.ytd-app ytd-browse.style-scope.ytd-page-manager ytd-two-column-browse-results-renderer.style-scope.ytd-browse.grid.grid-disabled div#primary.style-scope.ytd-two-column-browse-results-renderer ytd-rich-grid-renderer.style-scope.ytd-two-column-browse-results-renderer div#contents.style-scope.ytd-rich-grid-renderer
{
    --ytd-rich-grid-items-per-row: 8;
}

/* Youtube 頻道 - 影片分類寬度調整（數字越大，左右兩側留白越少） */
ytd-rich-grid-renderer[mini-mode] #contents.ytd-rich-grid-renderer {
    width: 1600px;
    max-width: 1600px;
}

/* 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;
}