<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://www.youtube.com/iframe_api"></script>
 <body>
<div class="crt-curve">
<div class="grain"></div>
<div class="vhs"></div>
<div class='tvguide'>  
  <div class="announcements-outer">
    <div class="announcementsBG desaturate">
    </div>
    <div class="announcements-inner">
      <p class="white">Welcome back to 1999</p>
      <p>TV GUIDE</p>
      <p class="white">Select any show to watch a snippet, or just vibe out with a forgotten view.</p>

        <div id ="tick">
          <ul id="ticker-list">
    <li>Latest News: Maude Flanders killed-off on 'The Simpsons' due to pay dispute with voice actress Maggie Roswell</li>
    <li>Latest News: 'Who Wants to Be a Millionaire' premieres and becomes America's most watched show</li>
    <li>Latest News: Premiere of HBO's The Sopranos' marks new age of television</li>
    <li>Latest News: Jon Stewart takes over 'The Daily Show'</li>
    <li>Latest News: FOX looks to invest in animation with the premieres of 'Family Guy' & 'Futurama'</li>
    <li>Latest News: Heavy favorite 'Saving Private Ryan' loses Best Picture at the Oscars to 'Sharespeare in Love'</li>
    <li>Latest News: 'Star Wars: The Phantom Menace' becomes the highest grossing film of the year, beating out 'The Sixth Sense' and 'Toy Story 2'</li>
    <li>Latest News: 'The Matrix' secures sci-fi legacy with pioneering visual effects and philosophical narrative.</li>
          </ul>
        </div>
    </div>
  </div>

<div class="tv">
<iframe
    id="youtube-video"
    width="560"
    height="315"
    src="https://www.youtube.com/embed/Q5Wb5G5fedI?autoplay=1&mute=1&controls=0&start=757"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
></iframe>

</div>
<div id="timeNow" class="cell">
      <div id="MyClockDisplay" onload="showTime()"></div>
    </div>
  <div class="guide">
    <div class='currentProgramming'>
      <div class="track timeSlots">
        <div class='cell'></div>
      
        <div class='cell'>
    <div class="nextTime" id="NextHR"></div>
        </div>
      
        <div class='cell'>
    <div class="nextTime" id="NextHR2"></div>
        </div>
      
        <div class='cell'>
    <div class="nextTime" id="NextHR3"></div>
        </div>
                <div class='cell'>
    <div class="nextTime" id="NextHR4"></div>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          03
          <br> PBS
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="tCMddVHburI">Arthur</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Z9gkcJleQxM">Zoboomafoo</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="c-bQ5PUMZxE">Dragon Tales</a>
        </div>
                <div class='cell'>
          <a href="#" data-video-id="dNt6C1rrtzs">Sesame Street</a>
        </div>
      </div>
      <div class="track channel">
        <div class='cell'>
          05
          <br> NBC
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Z7pm_T-t7dY">Friends</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Jw44z8AhP9s">Will & Grace</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Eb4Yjd0uINE">Frasier</a>
        </div>
                <div class='cell'>
          <a href="#" data-video-id="xx18XDUUp3E">3rd Rock from the Sun</a>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          07
          <br> ABC
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="h-V04Q-Ymhk">Home Improvement</a>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="GpWfnxeaLjs">Who Wants to be a Millionaire?</a>
        </div>
      
        <div class='cell3'></div>
                <div class='cell'>
                  <a href="#" data-video-id="g-oTE0p60Ws">NYPD Blue</a>
        </div>
      </div>
            <div class="track channel">
        <div class='cell'>
          08
          <br> CBS
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Gxx9NjYE3WU">Everybody Loves Raymond</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="6rDjB3o1vkM">King of Queens</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="UbJN0eXW5zg">The Nanny</a>
        </div>
                <div class='cell'>
                  <a href="#" data-video-id="GRRiKBCukC4">60 Minutes</a>
        </div>
      </div>
      
            <div class="track channel">
        <div class='cell'>
          09
          <br> UPN
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="Zyt2GKb6qWw">Pokemon</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="-UtUuT8AJjQ">Recess</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="G-4hBxOMl34">Pepper Ann</a>
        </div>
         <div class='cell'>
           <a href="#" data-video-id="Mnpnh1kN6do">Doug</a>
        </div>
      </div>
      
            <div class="track channel">
        <div class='cell'>
          10
          <br> FOX
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="R1KCjCo2JJw">America's Most Wanted</a>
        </div>
      
        <div class='cell3'>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="mwyBW9-we5A">King of the Hill</a>
        </div>
                <div class='cell'>
                  <a href="#" data-video-id="jjYLyucWwn4">Futurama</a>
        </div>
      </div>
            <div class="track channel">
        <div class='cell'>
          13
          <br> WB
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="dzoOTltr4M4">7th Heaven</a>
        </div>
      
        <div class='cell3'>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="y85KeLdnBNc">Dawson's Creek</a>
        </div>
                <div class='cell3'>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          15
          <br> WEATHER
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="CboPBn8d8VY">Weather Center</a>
        </div>
      
        <div class='cell3'>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="5trxBZIl270">Storm Center</a>
        </div>
        <div class='cell'>
          <a href="#" data-video-id="evr019jipPk">Your Local Weather</a>
        </div>
      </div>
      <div class="track channel">
        <div class='cell'>
          21
          <br> MTV
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="szZQLMytpMo">Spankin' New Music: Fiona Apple</a>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="E1fzJ_AYajA">Music Videos</a>
        </div>
      
        <div class='cell3'>
        </div>
                <div class='cell'>
                  <a href="#" data-video-id="zbXJ5eAgLSg">TRL</a>
        </div>
      </div>
            <div class="track channel">
        <div class='cell'>
          22
          <br> MTV2
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="LoAlKKmqeKQ">MTV Jams Countdown</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="OQUaguZawJQ">Beavis & Butt-Head</a>
        </div>
      
        <div class='cell'>
         <a href="#" data-video-id="cXER3SZLAXo">The Real World</a>
        </div>
                <div class='cell'>
         <a href="#" data-video-id="t2AcB3yXS8">Road Rules</a>
        </div>
      </div>
           <div class="track channel">
        <div class='cell'>
          23
          <br> CC
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="pAYoGopVZTc">South Park</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="90AITvzAyEQ">Strangers with Candy</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="WZwgrcZVa74">Comedy Central Presents</a>
        </div>
                <div class='cell'>
         <a href="#" data-video-id="hOIwat94a-A">Premium Blend</a>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          26
          <br> NICK
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="CW_B4KB0wYs">The Angry Beavers</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="oWqAf4eex14">Spongebob Squarepants</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="QT_eQEuPscE">Rocket Power</a>
        </div>
        
        <div class='cell'>
          <a href="#" data-video-id="iX04b9OampU">All That</a>
        </div>
      </div>
      
<div class="track channel">
        <div class='cell'>
          28
          <br> NICK-W
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="LAxchGHx13s">Spongebob Squarepants</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="54Afdxd6sUQ">CatDog</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="LVL2LDf1bcU">Rocko's Modern Life</a>
        </div>
        
        <div class='cell'>
          <a href="#" data-video-id="nLFjuVyP_n0">Figure It Out</a>
        </div>
      </div>
   
<div class="track channel">
        <div class='cell'>
          32
          <br> CARTOON
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="LYNyJgd3348">Cow and Chicken</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="1BPLXepRC8E">Ed, Edd n Eddy</a>
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="c0KlvkCKpE4">The Powerpuff Girls</a>
        </div>
        
        <div class='cell'>
          <a href="#" data-video-id="eexDkxvaZb8">Classic Cartoons</a>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          66
          <br> HBO
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="JMiFsFQcFLE">Rush Hour</a>
        </div>
      
        <div class='cell3'>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="ujMxXOHJloI">Armageddon</a>
        </div>
                <div class='cell3'>
        </div>
      </div>
      
      <div class="track channel">
        <div class='cell'>
          67
            <br> HBO2
        </div>
      
        <div class='cell'>
          <a href="#" data-video-id="YwIt5wagRsg">Small Soldiers</a>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="pt6bMHUoE6I">Godzilla</a>
        </div>
      
        <div class='cell3'>
          
        </div>
        <div class='cell'>
          <a href="#" data-video-id="1YGfrGKK9Mo">Titanic</a>
        </div>
      </div>
      
       <div class="track channel">
        <div class='cell'>
          66
          <br> STARZ
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="Gg9nzOFVwtQ">The Fifth Element</a>
        </div>
      
        <div class='cell3'>
        </div>
      
        <div class='cell2'>
          <a href="#" data-video-id="ezAsS01cDIs">The Truman Show</a>
        </div>
                <div class='cell3'>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
* {
  box-sizing: border-box;
}

html {
  font-size: 21px;
  line-height: 1.2;
  text-shadow: 1px 2px 1px black;
  height: 100%;
  overflow: hidden;
  width: 100%;
  background-color: darkblue;
  margin: auto;
  font-family: Arial, Helvetica, sans-serif;
  font-style: normal;
  font-variant: normal;
}

a {
  color: #fff;
  text-decoration: none;
}
.crt-curve {
  position: fixed;
  width: 92%;
  height: 94%;
  border-radius: 40% / 2%;
  padding: 0;
  margin: 2% 4%;
  z-index: 999999;
  pointer-events: none;
  filter: blur(0.75px);
}

.crt-curve:after {
  content: "";
  z-index: 99999999;
  position: absolute;
  top: -1%;
  left: -2%;
  right: -2%;
  bottom: -1%;
  background-image: radial-gradient(transparent 95%, #000);
  opacity: 1;
  box-shadow: inset 0 0 55px 6px #000, 0 0 0 150px #000;
  border-radius: 4.5% / 10%;
  pointer-events: none;
}

.white {
  color: white;
  font-size:0.8em;
}

.tvguide {
  width: 106%;
  height: 104%;
  margin: -2%;
  background-color: darkblue;
  display: grid;
  grid-template-columns: [first] auto [line2] 560px [end];
  grid-template-rows: [row1-start] 460px [row1-end] 66% [third-line] auto [last-line];
  transform: scale(1.01);
  overflow-x: auto;
  z-index: 999;
  filter: contrast(1.4) brightness(1.1);
}

.announcements-outer {
  grid-column: 1;
  grid-row: 1;
  background-color: #0f00ac;
  position: relative;
  width: 100%;
}

.announcements-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: yellow;
  position: absolute;
  padding:50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.announcementsBG {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Dish_Network_logo_2012.svg/2560px-Dish_Network_logo_2012.svg.png");
  opacity: 0.5;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 50%;
}

.tv {
  background-color: black;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  position: relative;
  margin: 0;
}
  iframe {
    transform: scale(1.35, 1.45) translate(0%, 0%);
    height: 100%;
    width: 560px;
    margin-top: 0;
  }

.guide {
  background-color: #151837;
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  overflow: hidden;
  height: 100vh;
  pointer-events: auto;
}

.cell {
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  background-color: #151837;
  color: yellow;
  padding-left: 20px;
  padding-top: 10px;
}

.cell2 {
  border-top: 3px solid white;
  border-left: 3px solid white;
  border-right: none;
  border-bottom: 3px solid black;
  background-color: #151837;
  color: white;
  padding-left: 10px;
  padding-top: 10px;
  white-space: nowrap;
}
.cell3 {
  border-top: 3px solid white;
  border-left: none;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  background-color: transparent;
  padding-left: 10px;
  padding-top: 10px;
}

#timeNow {
  position: fixed;
  top: 460px;
  left: 0;
  width: 200px;
  padding-left: 20px;
  background-color: #2b4973;
  z-index: 1;
  color: white;
  line-height: 2;
}

.track {
  grid-template-columns: 200px repeat(4, minmax(0px, 1fr));
}

.currentProgramming {
  display: grid;
}

.timeSlots {
  display: grid;
  position: sticky;
  top: 0;

  .cell {
    padding-left: 10px;
    background-color: #2b4973;
    line-height: 2;
  }
}

.channel {
  display: grid;

  > .cell:not(:first-of-type) {
    color: white;
    padding-left: 10px;
  }

  height: 8vh;
  overflow: hidden;
}

.desaturate {
  width: 100%;
  height: 100%;
  position: relative;
}

.desaturate:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  /*grayscale for background image*/
  -webkit-filter: grayscale(1);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: gray;
  filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
/* VHS BG */
.vhs {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  opacity: 1;
}

.vhs:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 9999;
  position: fixed;
  background-image: url("https://68.media.tumblr.com/595a5fa01fe53ca0e4ca8f37bacc849d/tumblr_nve67mJtue1tanofjo1_500.gif");
  background-size: repeat;
  opacity: 0.07;
  pointer-events: none;
  -webkit-animation: noise 0.5s steps(3) infinite;
  animation: noise 0.5s steps(3) infinite;
}

/* GRAIN BG */
.grain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  transform: translateZ(0);
  opacity: 1;
}

.grain:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 9999;
  position: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
  opacity: 0.25;
  pointer-events: none;
  -webkit-animation: noise 0.5s steps(4) infinite;
  animation: noise 0.5s steps(4) infinite;
}

@-webkit-keyframes noise {
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}

@keyframes noise {
  0% {
    transform: translate3d(0, 9rem, 0);
  }
  10% {
    transform: translate3d(-1rem, -4rem, 0);
  }
  20% {
    transform: translate3d(-8rem, 2rem, 0);
  }
  30% {
    transform: translate3d(9rem, -9rem, 0);
  }
  40% {
    transform: translate3d(-2rem, 7rem, 0);
  }
  50% {
    transform: translate3d(-9rem, -4rem, 0);
  }
  60% {
    transform: translate3d(2rem, 6rem, 0);
  }
  70% {
    transform: translate3d(7rem, -8rem, 0);
  }
  80% {
    transform: translate3d(-9rem, 1rem, 0);
  }
  90% {
    transform: translate3d(6rem, -5rem, 0);
  }
  to {
    transform: translate3d(-7rem, 0, 0);
  }
}

/* ticker */

#tick {
  white-space: nowrap;
  overflow: hidden;
  width: 120%;
  top: 410px;
  position: fixed;
  color: white;
  letter-spacing: 1px;
  font-size: 17px;
  background-color: darkblue;
  left: 0;
}

#tick ul {
  display: inline-block;
  animation: ticker 30s linear infinite;
  width: 65%;
}

#tick li {
  display: inline;
  padding-left: 40px;
  margin-right: 20px;
}

@keyframes ticker {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* small-screens */

@media only screen and (max-width: 800px) {
  html {
    font-size: 14px;
  }
  .crt-curve {
    margin: 4%;
  }
  .crt-curve:after {
    box-shadow: inset 0 0 30px 3px #000, 0 0 0 100px #000;
    border-radius: 8.5% / 10%;
  }
  .announcements-outer {
    display: none;
  }
  .tvguide {
    grid-template-columns: [first] auto [line2] 800px [end] 25%;
    grid-template-rows: [row1-start] 315px [row1-end] 33% [third-line] auto [last-line];
    overflow-x: hidden;
  }
  #timeNow {
    top: 315px;
    width: 85px;
    padding-left: 5px;
    font-size: 0.75em;
    line-height: 2.75;
  }
  .track {
    grid-template-columns: 85px repeat(10, minmax(0px, 1fr));
  }
  .cell,
  .cell2,
  .cell3 {
    padding-left: 8px;
  }
  .tv {
    width: 100vw;
    grid-column: 1;
  }

    iframe {
      height: 100%;
      max-width: 800px !important;
      position: absolute;
      left: 48%;
      top: 50%;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}
const ScrollRate = 100;
let DivElmnt = document.querySelector(".guide");
let ScrollInterval;

function scrollDiv_init() {
  DivElmnt.innerHTML += DivElmnt.innerHTML; // Duplicate the content for looping
  DivElmnt.scrollTop = 0;

  ScrollInterval = setInterval(scrollDiv, ScrollRate);
}

function scrollDiv() {
  DivElmnt.scrollTop++;
  if (DivElmnt.scrollTop >= DivElmnt.scrollHeight / 2) {
    DivElmnt.scrollTop = 0;
  }
}

function pauseDiv() {
  clearInterval(ScrollInterval);
}

function resumeDiv() {
  ScrollInterval = setInterval(scrollDiv, ScrollRate);
}

scrollDiv_init();

// clock code //

function showTime() {
  var date = new Date();
  var h = date.getHours(); // 0 - 23
  var m = date.getMinutes(); // 0 - 59
  var s = date.getSeconds(); // 0 - 59
  var session = h >= 12 ? "PM" : "AM"; // Adjust AM/PM based on the hour

  if (h == 0) {
    h = 12;
  } else if (h > 12) {
    h = h - 12;
  }

  h = h < 10 ? "0" + h : h;
  m = m < 10 ? "0" + m : m;
  s = s < 10 ? "0" + s : s;

  var time = h + ":" + m + ":" + s + " " + session;
  document.getElementById("MyClockDisplay").innerText = time;
  document.getElementById("MyClockDisplay").textContent = time;

  // Calculate the next times in 30, 60, 90, and 120-minute increments //

  var next30Min = new Date(date.getTime() + -30 * 60 * 1000);
  var next60Min = new Date(date.getTime() + 0 * 60 * 1000);
  var next90Min = new Date(date.getTime() + 30 * 60 * 1000);
  var next120Min = new Date(date.getTime() + 60 * 60 * 1000);

  var roundUpToNearestHalfHour = function (time) {
    var minutes = time.getMinutes();
    if (minutes <= 30) {
      time.setMinutes(30);
    } else {
      time.setHours(time.getHours() + 1);
      time.setMinutes(0);
    }
    return time;
  };

  next30Min = roundUpToNearestHalfHour(next30Min);
  next60Min = roundUpToNearestHalfHour(next60Min);
  next90Min = roundUpToNearestHalfHour(next90Min);
  next120Min = roundUpToNearestHalfHour(next120Min);

  var formatTime = function (time) {
    var hours = time.getHours();
    var minutes = time.getMinutes();
    var session = hours >= 12 ? "PM" : "AM";

    hours = hours % 12;
    hours = hours || 12;

    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;

    return hours + ":" + minutes + " " + session;
  };

  // Update all elements with class "nextTime"
  var nextTimes = document.getElementsByClassName("nextTime");
  for (var i = 0; i < nextTimes.length; i++) {
    switch (i) {
      case 0:
        nextTimes[i].textContent = formatTime(next30Min);
        break;
      case 1:
        nextTimes[i].textContent = formatTime(next60Min);
        break;
      case 2:
        nextTimes[i].textContent = formatTime(next90Min);
        break;
      case 3:
        nextTimes[i].textContent = formatTime(next120Min);
        break;
      default:
        break;
    }
  }

  setTimeout(showTime, 1000);
}

showTime();

// ticker

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

const tickerList = document.getElementById("ticker-list");
const lis = tickerList.querySelectorAll("li");

const randomIndex = getRandomInt(0, lis.length - 1);
const selectedLi = lis[randomIndex].cloneNode(true);

tickerList.innerHTML = ""; // Clear the list
tickerList.appendChild(selectedLi);

// Set animation delay based on li index
selectedLi.style.animationDelay = `-${randomIndex * 2}s`; // Adjust animation speed as needed

// change channel

document.addEventListener("DOMContentLoaded", function () {
  const video = document.getElementById("youtube-video");
  const links = document.querySelectorAll("a[data-video-id]");

  links.forEach((link) => {
    link.addEventListener("click", (event) => {
      event.preventDefault();
      const videoId = link.getAttribute("data-video-id");
      const newSrc = `https://www.youtube.com/embed/${videoId}?autoplay=1&controls=0`;
      video.setAttribute("src", newSrc);
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.