YouTube'da Kayan Sidebar Özelliği

YouTube'da Sag Paneli Bagimsiz Kaydirma Özelligi Nasil Eklenir?

YouTube'da özellikle uzun videolar izlerken sag tarafta bulunan önerilen videolar paneli bazen oldukça kullanissiz hale gelebiliyor. Sayfayi asagi dogru kaydirdigimizda video da ekranin disina çikiyor ve sag taraftaki önerilere ulasmak için tekrar yukari çikmak gerekiyor.

Bu yazida küçük bir Tampermonkey betigi kullanarak YouTube'un sag tarafindaki önerilen videolar bölümünü bagimsiz sekilde kaydirilabilir hale getirecegiz.

Yapacagimiz düzenlemeden sonra video ekrani sabit kalirken, sag taraftaki önerilen videolar kendi içerisinde kaydirilabilecek. Üstelik bunun için YouTube'un dosyalarina müdahale etmeye veya tarayiciya ayri bir eklenti gelistirmeye gerek yok.

Bu Düzenleme Ne Ise Yariyor?

Normal YouTube görünümünde sayfayi asagi dogru kaydirdiginizda sag taraftaki öneriler de sayfayla birlikte hareket eder.

Ekledigimiz kullanici betigi ise sag paneli ekran yüksekligine göre sinirlandiriyor ve bu alana kendi kaydirma çubugunu ekliyor.

• Video alani ekranda kaliyor.
• Sagdaki önerilen videolar bagimsiz olarak kaydirilabiliyor.
• Uzun öneri listelerinde gezinmek daha kolay hale geliyor.
• Ek bir YouTube ayari degistirmeye gerek kalmiyor.
• Islem yalnizca kullanicinin kendi tarayicisinda gerçeklesiyor.

Nasil Görünüyor?

Asagidaki görselde uygulanmis sistemin çalisma mantigini görebilirsiniz.

Çalisma Mantigi

Betigin temelinde YouTube'un sag taraftaki panelini temsil eden #secondary elementi bulunuyor.

Bu bölüme birkaç CSS özelligi uygulayarak panelin ekran içerisinde belirli bir yükseklikte kalmasini sagliyoruz.

Örnegin:

• position: sticky panelin belirlenen konumda kalmasina yardimci oluyor.
• max-height panelin ekrani tamamen kaplamasini engelliyor.
• overflow-y: auto ise panelin kendi içerisinde dikey olarak kaydirilmasini sagliyor.

Böylece tarayicinin normal sayfa kaydirma davranisindan bagimsiz olarak sag panel içerisinde ayri bir kaydirma alani olusturulmus oluyor.

Kurulum Için Gerekenler

Bu islemi yapmak için çok fazla araca ihtiyacimiz yok.

1. Chrome, Edge veya Firefox gibi bir internet tarayicisi
2. Tampermonkey kullanici betigi yöneticisi
3. Asagida paylasacagimiz JavaScript kodu

1. Tampermonkey'i Kurun

Öncelikle kullandiginiz tarayiciya Tampermonkey eklentisini kurmaniz gerekiyor.

Tampermonkey, internet sitelerinde kullanici tarafindan hazirlanan JavaScript kodlarini çalistirmaya yarayan oldukça kullanisli bir araçtir.

Eklentiyi kurduktan sonra tarayicinizin araç çubugunda Tampermonkey simgesini görebilirsiniz.

2. Yeni Bir Kullanici Betigi Olusturun

Tampermonkey simgesine tiklayin ve yeni bir kullanici betigi olusturun.

Açilan editörde bulunan örnek kodlarin tamamini silin.

Burada önemli olan nokta, olusturacagimiz betigin yalnizca YouTube üzerinde çalismasidir. Bunun için kodun üst kisminda bulunan @match satiri kullanilmaktadir.

Kullandigimiz:

https://www.youtube.com/*

tanimi, betigin YouTube sayfalarinda çalismasini saglar.

3. Asagidaki Kodu Ekleyin

Simdi Tampermonkey editörüne asagidaki kodu oldugu gibi ekleyin:

Tempermonky - Code

// ==UserScript==
// @name         YouTube Independent Sidebar Scroll
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Makes YouTube sidebar scroll independently while keeping video pinned
// @author       Gemini
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    const css = `
        /* Sag paneli ekran yüksekligine sabitle ve bagimsiz scroll ekle */
        #secondary.ytd-watch-flexy {
            position: sticky !important;
            top: 70px !important;
            max-height: calc(100vh - 80px) !important;
            overflow-y: auto !important;
            padding-right: 8px;
        }

        /* Sag paneldeki scrollbar'i estetik hale getir */
        #secondary.ytd-watch-flexy::-webkit-scrollbar {
            width: 6px;
        }

        #secondary.ytd-watch-flexy::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
        }
    `;

    if (typeof GM_addStyle !== 'undefined') {
        GM_addStyle(css);
    } else {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = css;
        document.head.appendChild(style);
    }
})();

4. Kodu Kaydedin

Kodu ekledikten sonra Ctrl + S tuslarina basarak betigi kaydedin.

Burada Tampermonkey betigin aktif oldugunu göstermelidir. Eger pasif durumdaysa betigin yanindaki etkinlestirme seçenegini açin.

5. YouTube'u Yenileyin

Simdi YouTube'a geri dönün ve sayfayi yenileyin.

Bir video açtiktan sonra sag taraftaki önerilen videolar bölümünü kontrol edin.

Panelin içerisinde yeterli miktarda içerik varsa artik sag tarafta bagimsiz bir kaydirma alani olusacaktir.

Scrollbar Görünümünü de Degistiriyoruz

Kodun yalnizca kaydirma özelligi ekledigini düsünmeyin. Küçük bir dokunusla scrollbar görünümünü de daha sade hale getiriyoruz.

Su bölüm scrollbar genisligini belirliyor:

#secondary.ytd-watch-flexy::-webkit-scrollbar {
    width: 6px;
}

Kaydirma çubugunun rengini ise asagidaki bölüm kontrol ediyor:

#secondary.ytd-watch-flexy::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

Isterseniz bu degerleri degistirerek scrollbar'i kendi kullandiginiz temaya göre düzenleyebilirsiniz.

Bir Sey Çalismazsa Ne Yapmali?

YouTube'un arayüzü zaman zaman degisebiliyor. Bu nedenle ileride YouTube tarafinda sag panelin HTML yapisi degistirilirse kullanilan CSS seçicinin güncellenmesi gerekebilir.

Özellikle #secondary.ytd-watch-flexy seçicisi sag panelin bulunmasinda önemli rol oynuyor.

Eger betigi kurduktan sonra herhangi bir degisiklik göremezseniz öncelikle:

1. Tampermonkey betiginin aktif oldugunu kontrol edin.
2. YouTube sayfasini tamamen yenileyin.
3. Farkli bir video sayfasinda tekrar deneyin.
4. Tarayiciyi yeniden baslatin.

Sonuç

Küçük bir kullanici betigiyle YouTube'un sag panel kullanimini oldukça farkli bir hale getirebiliyoruz.

Özellikle uzun videolarda veya çok sayida önerilen içerik bulunan sayfalarda bu yöntem oldukça kullanisli. Video ekrani sürekli göz önünde kalirken sag taraftaki içerikler kendi alaninda hareket ediyor.

En güzel tarafi ise bunun için YouTube'a herhangi bir dosya yüklemeye, sistem dosyalarini degistirmeye veya karmasik bir uygulama kurmaya gerek olmamasi.

Tampermonkey + birkaç satir CSS ile YouTube'un kullanim seklini kendi ihtiyacimiza göre degistirmek mümkün.

Bu tarz küçük kullanici betikleriyle YouTube üzerinde daha birçok arayüz düzenlemesi yapilabilir. Özellikle kisisel kullanim için hazirlanan bu tür çözümler, hazir eklentilere ihtiyaç duymadan tarayici deneyimini özellestirmek isteyenler için oldukça pratik.

Not: YouTube'un arayüz yapisi gelecekte degisirse betigin bazi bölümlerinin güncellenmesi gerekebilir.

Tampermonkey Sayfası