Skip to content

Instantly share code, notes, and snippets.

@hising

hising/crt.html

Created January 24, 2025 21:16
Show Gist options
  • Save hising/614173ac7261721b73224384767a408b to your computer and use it in GitHub Desktop.
Save hising/614173ac7261721b73224384767a408b to your computer and use it in GitHub Desktop.
Download ZIP
Try to mimic a CRT-screen when embedding retro game longplays
Raw
crt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRT YouTube Player</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #121010;
font-family: monospace;
color: #fff;
}
.crt-container {
position: relative;
width: 100%;
max-width: 1024px;
aspect-ratio: 4/3;
box-shadow: 0 0 20px rgba(0,0,0,0.8);
border: 10px solid #2c2c2c;
border-radius: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.crt-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: filter 0.3s ease;
}
.crt-video.filtered {
filter:
brightness(0.9)
contrast(1.2)
saturate(1.1)
hue-rotate(-10deg);
}
.crt-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
background:
radial-gradient(
ellipse at center,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 75%,
rgba(0,0,0,0.4) 100%
),
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 3px,
transparent 3px,
transparent 6px
);
mix-blend-mode: overlay;
opacity: 0;
transition: opacity 0.3s ease;
}
.crt-overlay.active {
opacity: 1;
}
.screen-border {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 5px solid #1a1a1a;
box-shadow:
inset 0 0 50px rgba(0,0,0,0.5),
0 0 20px rgba(0,0,0,0.6);
pointer-events: none;
z-index: 15;
}
.filter-toggle {
padding: 10px 20px;
background-color: #333;
border: none;
color: white;
cursor: pointer;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="crt-container">
<iframe
id="youtube-video"
class="crt-video filtered"
src="https://www.youtube.com/embed/x5LmydDUhVQ"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<div id="crt-overlay" class="crt-overlay active"></div>
<div class="screen-border"></div>
</div>
<button id="filter-toggle" class="filter-toggle">Disable CRT Filter</button>
<script>
const video = document.getElementById('youtube-video');
const overlay = document.getElementById('crt-overlay');
const toggleBtn = document.getElementById('filter-toggle');
let isFiltered = true;
toggleBtn.addEventListener('click', () => {
isFiltered = !isFiltered;
video.classList.toggle('filtered', isFiltered);
overlay.classList.toggle('active', isFiltered);
toggleBtn.textContent = isFiltered ? 'Disable CRT Filter' : 'Enable CRT Filter';
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment