Dieses Dreamcodes Script verwandelt YouTube Videos in einen filmischen Kino Einstieg. Statt eines normalen Players beginnt alles mit einem reduzierten Intro und geht dann nahtlos in einen Cinema Mode über. Letterbox Format, dezentes Filmkorn und eine minimale Kamerabewegung sorgen für Tiefe und Fokus, ohne vom Inhalt abzulenken. Die YouTube Oberfläche tritt komplett in den Hintergrund, das Video steht im Mittelpunkt. Gedacht für Seiten, wo ein Video nicht abgespielt, sondern inszeniert werden soll.
<?php
$channelName = "Cinematic Channel";
$youtubeVideoId = "dQw4w9WgXcQ"; // Startvideo
$accentColor = "#e50914"; // Netflix-Rot
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Dreamcodes - <?= htmlspecialchars($channelName) ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
background: #000;
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont;
}
#intro {
position: fixed;
inset: 0;
background: black;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
animation: introFadeOut 1.5s ease forwards;
animation-delay: 4.5s;
}
#logo {
color: white;
font-size: 42px;
letter-spacing: 0.35em;
opacity: 0;
transform: scale(0.9);
animation: logoIn 3s ease forwards;
}
@keyframes logoIn {
0% { opacity: 0; transform: scale(0.9); }
40% { opacity: 1; }
100% { opacity: 1; transform: scale(1); }
}
@keyframes introFadeOut {
to { opacity: 0; pointer-events: none; }
}
.cinema {
position: relative;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #111, #000 70%);
}
.cinema::before,
.cinema::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 12%;
background: black;
z-index: 5;
}
.cinema::before { top: 0; }
.cinema::after { bottom: 0; }
.frame {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(1.04);
transition: transform 1.8s ease;
}
iframe {
width: 82vw;
height: 46vw;
max-width: 1600px;
max-height: 900px;
border: none;
box-shadow:
0 0 120px rgba(255,255,255,0.06),
0 40px 160px rgba(0,0,0,0.95);
}
.channel {
position: absolute;
bottom: 14%;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: 0.4em;
color: rgba(255,255,255,0.6);
}
.grain {
position: fixed;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
animation: grain 1.1s steps(2) infinite;
}
@keyframes grain {
from { transform: translate(0,0); }
to { transform: translate(-10%, -10%); }
}
</style>
</head>
<body>
<div id="intro">
<div id="logo"><?= htmlspecialchars($channelName) ?></div>
</div>
<div class="cinema">
<div class="frame" id="frame">
<iframe
src="https://www.youtube.com/embed/<?= $youtubeVideoId ?>?autoplay=1&controls=0&modestbranding=1&rel=0"
allow="autoplay; fullscreen">
</iframe>
</div>
<div class="channel"><?= htmlspecialchars($channelName) ?></div>
</div>
<div class="grain"></div>
<script>
const frame = document.getElementById('frame');
let mx = 0, my = 0;
window.addEventListener('mousemove', e => {
mx = (e.clientX / innerWidth - 0.5);
my = (e.clientY / innerHeight - 0.5);
frame.style.transform =
`scale(1.04) translate(${mx * 14}px, ${my * 8}px)`;
});
</script>
</body>
</html>
