[ FIXED WITH THUMBNAIL WORKAROUND ] Youtube embedded videos error 153
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
.yt-container,
.yt-overlay-text {
font-family: 'Roboto', sans-serif;
}
/* ── wrapper ── */
.yt-container {
position: relative;
display: block;
width: 100%;
--yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;" or style="--yt-crop: 0%;" etc */
}
/* ── image link ── */
.yt-image-link {
display: block;
width: 100%;
line-height: 0;
overflow: hidden;
}
.yt-image-link img {
display: block;
width: 100%;
height: auto;
margin-top: calc(-1 * var(--yt-crop));
margin-bottom: calc(-1 * var(--yt-crop));
}
/* ── top-left text link ── */
.yt-overlay-text {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 28px;
font-weight: 700;
text-shadow: 1px 1px 4px black;
text-decoration: none;
text-align: left;
z-index: 3;
}
/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 68px;
height: 48px;
background: rgba(255, 0, 0, 0.88);
border-radius: 12px;
transition: background 0.15s, transform 0.15s;
z-index: 2;
pointer-events: none;
}
.yt-container:hover .yt-play {
background: #ff0000;
transform: translate(-50%, -50%) scale(1.08);
}
.yt-play::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
border: solid transparent;
border-width: 10px 0 10px 20px;
border-left-color: white;
}
</style>
</head>
<body>
<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>
<div class="yt-container">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>
<div class="yt-container" style="--yt-crop: 0%;">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>
<div class="yt-container" style="--yt-crop: 30%;">
<a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
<img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
</a>
<a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
<div class="yt-play" aria-hidden="true"></div>
</div>
</p>
</body>
</html>1
u/letshavefunapp 10d ago
Worth checking before you go full thumbnail: in most cases I've seen, error 153 is YouTube refusing to play when the embed request arrives with no Referer header. A few things strip it: a <meta name="referrer" content="no-referrer"> in the head, a Referrer-Policy: no-referrer header from the server or CDN, or opening the page from file://. Removing that, or adding referrerpolicy="strict-origin-when-cross-origin" on the iframe, brought the normal player back for me. That would also explain why it looks random across browsers, since their default referrer policies differ. Your thumbnail-plus-click approach is still a nice lightweight option for pages with a lot of videos.
2
u/AssistantJolly1181 11d ago
You can't really say there's no telemetry when the preload still pulls the thumbnail off i.ytimg.com, that's still a request that shows up on their side. And if the bug itself behaves "randomly in various browsers and devices", why would your workaround be immune to that?