Tv hello Kitty 🩷 //Three videos on TV// :0

<div class="TV-CONTAINER"> <div class="TV-SCREEN"> <!-- FILTRO VISUAL --> <div class="TV-FX-LAYER"> <div class="TV-FX-LINES"></div> <div class="TV-FX-SWEEP"></div> </div> <!-- INTRO DE 3 SEGUNDOS --> <div class="TV-INTRO"> <img src="https://i.postimg.cc/SxH0MrV8/4256cdab4cc1f125d5d9c379dd1ac607.jpg" class="TV-INTRO-IMG"> </div> <div class="TV-CHANNELS"> <!-- VIDEO 1° --> <div class="VIDEO-1"> <div class="TV-PLAYER"> <iframe src="https://www.youtube.com/embed/-HZ4ciDp82A?autoplay=1&loop=1&playlist=-HZ4ciDp82A&controls=0&modestbranding=1&mute=0&vq=small" frameborder="0" allow="autoplay; encrypted-media"></iframe> </div> </div> <!-- VIDEO 2° --> <div class="VIDEO-2"> <div class="TV-PLAYER"> <iframe src="https://www.youtube.com/embed/Xp4aivnG2zo?autoplay=0&loop=1&playlist=Xp4aivnG2zo&controls=0&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media"></iframe> </div> </div> <!-- VIDEO 3° --> <div class="VIDEO-3"> <div class="TV-PLAYER"> <iframe src="https://www.youtube.com/embed/nkQ6qs2ejiM?autoplay=0&loop=1&playlist=nkQ6qs2ejiM&controls=0&modestbranding=1" frameborder="0" allow="autoplay; encrypted-media"></iframe> </div> </div> </div> </div> <img src="https://i.ibb.co/gL6vtxfG/upscalemedia-transformed-7.png" class="TV-FRAME"> </div> <style> .TV-CONTAINER { position: relative; width: 350px; margin: 20px auto; overflow: hidden; } .TV-SCREEN { position: absolute; top: 41px; left: 23px; width: 304px; height: 196px; border-radius: 10px; overflow: hidden; z-index: 1; background: #000; filter: blur(0.4px) brightness(0.9) contrast(1.1); animation: TV-PULSE 4s ease-in-out infinite; } .TV-FX-LAYER { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; pointer-events: none; } .TV-FX-LINES { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 3px, 3px 100%; } .TV-FX-SWEEP { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%); background-size: 100% 20px; animation: TV-SWEEP-ANIM 10s linear infinite; } @keyframes TV-SWEEP-ANIM { 0% { background-position: 0 -100%; } 100% { background-position: 0 100%; } } .TV-INTRO { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; background: #000; animation: TV-FADE 3s ease-out forwards; } .TV-INTRO-IMG { width: 100%; height: 100%; object-fit: cover; } @keyframes TV-FADE { 0% { opacity: 1; visibility: visible; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } } .TV-CHANNELS { display: flex; width: 100%; height: 100%; overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; z-index: 10; -ms-overflow-style: none; scrollbar-width: none; } .TV-CHANNELS::-webkit-scrollbar { display: none; } .VIDEO-1, .VIDEO-2, .VIDEO-3 { min-width: 100%; height: 100%; scroll-snap-align: start; position: relative; } .TV-PLAYER { width: 100%; height: 100%; background: #000; display: flex; align-items: center; justify-content: center; } .TV-PLAYER iframe { width: 100%; height: 180px; border: none; } .TV-FRAME { display: block; width: 100%; position: relative; z-index: 200; pointer-events: none; } @keyframes TV-PULSE { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.001); } } </style>