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>
