Schermo TV HTML con incorporamento di YouTube ed effetti

932 alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice

Schermo TV HTML con incorporamento di YouTube ed effetti

Consigliato

24 November 2025

Codice sorgente HTML5 del gioco casuale Basket

22 August 2025

Commento segnaposto codice HTML

17 November 2025

Un codice di Mete

HTML

CSS

body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: relative;
}
.tv-screen {
  position: absolute;
  width: 90vw;
  height: 50vw;
  max-width: 100%;
  max-height: 100vh;
  background-image: url(https://alexandrevacassin.fr/codepen/old-tv/base.webp);
  z-index: 10;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.tv-container {
  position: absolute;
  margin-bottom: 3vw;
  width: 60vw;
  margin-right: 10vw;
  height: 45vw;
  max-width: 100%;
  max-height: 70vh;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden
}
video, iframe {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  filter: contrast(1.2) brightness(1.1);
}
.glitch {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  mix-blend-mode: multiply;
  opacity: 0.3;
  animation: glitchMove 0.2s infinite linear;
  z-index: 2;
}
.scan-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0) 2px
  );
  pointer-events: none;
  z-index: 2;
}
@keyframes glitchMove {
  0% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
canvas {
  mix-blend-mode: screen;
  position: absolute;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.snow-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
  background-size: cover;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

JS

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

class VCREffect {
    constructor(canvas, options = {}) {
        this.canvas = canvas;
        this.ctx = canvas.getContext("2d");
        this.config = Object.assign({
            fps: 60,
            blur: 1,
            opacity: 1,
            miny: 220,
            miny2: 220,
            num: 70
        }, options);

this.init();
    }

init() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
        this.canvas.style.position = "absolute";
        this.canvas.style.top = "0";
        this.canvas.style.left = "0";
        this.canvas.style.opacity = this.config.opacity;

this.generateVCRNoise();
        window.addEventListener("resize", () => this.onResize());
    }

onResize() {
        this.canvas.width = window.innerWidth;
        this.canvas.height = window.innerHeight;
    }

generateVCRNoise() {
        if (this.config.fps >= 60) {
            cancelAnimationFrame(this.vcrInterval);
            const animate = () => {
                this.renderTrackingNoise();
                this.vcrInterval = requestAnimationFrame(animate);
            };
            animate();
        } else {
            clearInterval(this.vcrInterval);
            this.vcrInterval = setInterval(() => {
                this.renderTrackingNoise();
            }, 1000 / this.config.fps);
        }
    }

renderTrackingNoise(radius = 2) {
        const { canvas, ctx, config } = this;
        let { miny, miny2, num } = config;

canvas.style.filter = `blur(${config.blur}px)`;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = `#fff`;

ctx.beginPath();
        for (let i = 0; i <= num; i++) {
            let x = Math.random() * canvas.width;
            let y1 = getRandomInt(miny += 3, canvas.height);
            let y2 = getRandomInt(0, miny2 -= 3);
            ctx.fillRect(x, y1, radius, radius);
            ctx.fillRect(x, y2, radius, radius);
            ctx.fill();

this.renderTail(ctx, x, y1, radius);
            this.renderTail(ctx, x, y2, radius);
        }
        ctx.closePath();
    }

renderTail(ctx, x, y, radius) {
        const n = getRandomInt(1, 50);
        const dirs = [1, -1];
        let dir = dirs[Math.floor(Math.random() * dirs.length)];

for (let i = 0; i < n; i++) {
            let r = getRandomInt(radius - 0.01, radius);
            let dx = getRandomInt(1, 4) * dir;
            radius -= 0.1;
            ctx.fillRect((x += dx), y, r, r);
            ctx.fill();
        }
    }
}

// Usage
const canvas = document.getElementById("canvas");
const vcrEffect = new VCREffect(canvas, {
    opacity: 1,
    miny: 220,
    miny2: 220,
    num: 70,
    fps: 60,
    blur: 1
});
const videoIds = ["c4CVKbVtTsc", "143aXLat70E", "J5SSsT1O9gE", "dAiomIGB3qo", "lk6iJNSv-vY", "7PgJLyeb6sM", "wz0A7m1euy0"];
let currentVideoIndex = 0;
const iframe = document.getElementById("ytplayer");
const snowEffect = document.querySelector(".snow-effect");

iframe.addEventListener("load", () => {
  setTimeout(switchToNextVideo, 20000); 
});

Consigliato

Codice sorgente HTML5 del gioco casuale Basket

Commento segnaposto codice HTML

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS