I'm a bit of a maximalist when it comes to streaming quality. Video quality, audio quality - crank it all to 11. It's the reason everything in my house is hard-lined via ethernet.
It wasn't until recently though that I noticed that YouTube wasn't sharing my desperation for definition. I found that my videos were often playing well-below what my bandwidth could handle.
From a system design perspective, this makes sense - lower quality video being significantly cheaper to stream for YouTube's servers. But I'm not a $GOOGL shareholder, so let's give these ethernet cables a purpose.
Let's Make a Chrome Extension 👨💻
A quick perusal of YouTube's settings revealed that there was no available setting to address my issue.
Scrolling through available Chrome extensions, it appeared other devs had tried to address this issue, but achieved inconsistent results.
I still figured this would be a relatively easy problem to address. Even if it meant being a little hacky, I'd rather wait a second, and have something done automatically, than risk slightly straining my hand by having to click through playback options 😮💨.
"It Works On My Machine"
This approach is admittedly brittle, since it relies on DOM element names. Should YouTube ever decide to change them, the code will require some tweaking. Given the breadth of the YouTube ecosystem though, I feel confident this extension's value should persist for awhile. My first Chrome extension still works 8 years later, despite sharing a similar constraint.
Happy Streaming ✌️
If you'd like to implement this extension on your machine, follow the instructions below. I decided not to publish this extension to the Chrome store, since I'm not sure it's entirely within big G's terms of service.
Installation
- Create a folder, drop in the two files below.
- In Chrome, go to
chrome://extensions, enable “Developer mode,” click “Load unpacked,” and select your folder. - Navigate to any YouTube video—after the ad ends, it will jump to the top available quality automagically.
content.js
(function() {
const player = () => document.getElementById('movie_player');
let lastVideoId = null;
// Choose best quality (filter out "highres", which often requires Premium)
function setBestQuality() {
const p = player();
if (!p || typeof p.getAvailableQualityLevels !== 'function') return;
const levels = p.getAvailableQualityLevels();
if (!levels || !levels.length) return;
// levels are ordered highest→lowest; remove any “highres”
const best = levels.find(q => q.toLowerCase() !== 'highres');
if (best) p.setPlaybackQuality(best);
}
// Watch for the end of ads by observing the player's class list
function watchForAdEnd() {
const p = player();
if (!p) return;
const obs = new MutationObserver(muts => {
muts.forEach(m => {
if (m.attributeName === 'class') {
const cls = m.target.classList;
if (!cls.contains('ad-showing')) {
setBestQuality();
}
}
});
});
obs.observe(p, { attributes: true });
// also attempt immediately in case no ad
setBestQuality();
}
// Detect navigation to a new video in YouTube’s SPA
function initWhenReady() {
const vid = new URLSearchParams(location.search).get('v');
if (vid && vid !== lastVideoId) {
lastVideoId = vid;
// small delay to give the player time to initialize
setTimeout(watchForAdEnd, 1000);
}
}
// Listen to YouTube’s internal navigation event
window.addEventListener('yt-navigate-finish', initWhenReady);
// Fallback: on popstate
window.addEventListener('popstate', initWhenReady);
// Initial run
initWhenReady();
})();manifest.json
{
"manifest_version": 3,
"name": "YouTube Auto HD",
"version": "1.0",
"description": "After ads end, set YouTube to the highest non-Premium quality automatically.",
"permissions": ["scripting"],
"host_permissions": ["https://www.youtube.com/*"],
"content_scripts": [
{
"matches": ["https://www.youtube.com/watch*"],
"js": ["content.js"],
"run_at": "document_idle"
}
]
}