bronze · November 16, 2024 16:13
diff --git a/index.html b/index.html

 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>YouTube Video with Timed Text</title>
    <style>
      .highlight {
        display: block;
        background-color: yellow;
        color: red;
        padding: 10px;
        border-radius: 5px;
        font-weight: bold;
      }
      .timed-text {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="player"></div>
    <p class="timed-text" data-time="300">5 minutes</p>
    <p class="timed-text" data-time="600">10 minutes</p>

    <script src="https://www.youtube.com/iframe_api"></script>
    <script>
      let player;
      let paragraphs = document.querySelectorAll(".timed-text");

      function onYouTubeIframeAPIReady() {
        player = new YT.Player("player", {
          height: "360",
          width: "640",
          videoId: "KSCjl_VIdak", // Replace with your video ID
          events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange,
          },
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING) {
          checkTime();
        }
      }

      function checkTime() {
        let currentTime = player.getCurrentTime();

        paragraphs.forEach((paragraph) => {
          let triggerTime = parseFloat(paragraph.getAttribute("data-time"));
          if (currentTime >= triggerTime && currentTime < triggerTime + 1) {
            paragraph.classList.add("highlight");
          } else {
            paragraph.classList.remove("highlight");
          }
        });

        setTimeout(checkTime, 100); // Check every 100 milliseconds
      }
    </script>
  </body>
 </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>YouTube Video with Timed Text</title>
	<style>
	.highlight {
	display: block;
	background-color: yellow;
	color: red;
	padding: 10px;
	border-radius: 5px;
	font-weight: bold;
	}
	.timed-text {
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="player"></div>
	<p class="timed-text" data-time="300">5 minutes</p>
	<p class="timed-text" data-time="600">10 minutes</p>

	<script src="https://www.youtube.com/iframe_api"></script>
	<script>
	let player;
	let paragraphs = document.querySelectorAll(".timed-text");

	function onYouTubeIframeAPIReady() {
	player = new YT.Player("player", {
	height: "360",
	width: "640",
	videoId: "KSCjl_VIdak", // Replace with your video ID
	events: {
	onReady: onPlayerReady,
	onStateChange: onPlayerStateChange,
	},
	});
	}

	function onPlayerReady(event) {
	event.target.playVideo();
	}

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	checkTime();
	}
	}

	function checkTime() {
	let currentTime = player.getCurrentTime();

	paragraphs.forEach((paragraph) => {
	let triggerTime = parseFloat(paragraph.getAttribute("data-time"));
	if (currentTime >= triggerTime && currentTime < triggerTime + 1) {
	paragraph.classList.add("highlight");
	} else {
	paragraph.classList.remove("highlight");
	}
	});

	setTimeout(checkTime, 100); // Check every 100 milliseconds
	}
	</script>
	</body>
	</html>