upd

yad/index.html

@@ -13,6 +13,15 @@
             <h1>YAD: YouTube Auto Delay</h1>
         </header>
 
+        <div id="explanation">
+            <p>
+                This website allows you to configure the delay for a YouTube
+                Live Stream. The YouTube player will always keep the delay
+                fixed. If the current delay differs by more than 60 seconds from
+                the configured delay, it will automatically be reset back.
+            </p>
+        </div>
+
         <section>
             <label for="videoId">Video ID:</label>
             <input

yad/script.js

@@ -59,33 +59,49 @@ function isVideoCurrentTimeGood() {
     if (perfectTime === 0) {
         console.error('Invalid perfect time:', perfectTime);
     }
-    return (currentTime - perfectTime) < DELAY_MARGIN && (currentTime - perfectTime) > -DELAY_MARGIN;
+    return (
+        currentTime - perfectTime < DELAY_MARGIN &&
+        currentTime - perfectTime > -DELAY_MARGIN
+    );
 }
 
 function onPlayerStateChange(event) {
     if (event.data == YT.PlayerState.PLAYING) {
         isPlayerReady = true;
         systemTimeWhenStarted = getSystemCurrentTime();
         // for live streams player.getDuration() gives a much bigger time than actual duration
-        durationWhenStarted = player.getDuration() - 3600;  
+        durationWhenStarted = player.getDuration() - 3600;
 
-        console.log(calculateVideoDelayedTime(), player.getCurrentTime(), !isVideoCurrentTimeGood());
+        console.log(
+            calculateVideoDelayedTime(),
+            player.getCurrentTime(),
+            !isVideoCurrentTimeGood(),
+        );
     }
 }
 
 function calculateVideoDelayedTime() {
     if (!(durationWhenStarted > 0) || !(systemTimeWhenStarted > 0)) {
-        console.error('Invalid duration:', durationWhenStarted, 'or time:', systemTimeWhenStarted);
+        console.error(
+            'Invalid duration:',
+            durationWhenStarted,
+            'or time:',
+            systemTimeWhenStarted,
+        );
         return 0;
     }
-    return (getSystemCurrentTime() - systemTimeWhenStarted) + (durationWhenStarted - delay);
+    return (
+        getSystemCurrentTime() -
+        systemTimeWhenStarted +
+        (durationWhenStarted - delay)
+    );
 }
 
 var player;
-// duration of video when it started playing in seconds 
+// duration of video when it started playing in seconds
 // (it doesn't get auto updated for live streams)
-var durationWhenStarted;  
-var systemTimeWhenStarted;  // current time when video started in seconds
+var durationWhenStarted;
+var systemTimeWhenStarted; // current time when video started in seconds
 var intervalId = -1;
 var videoId = getParameterByName(VIDEO_ID_PARAM_NAME);
 var delay = getParameterByName(DELAY_PARAM_NAME);
@@ -101,4 +117,4 @@ intervalId = setInterval(() => {
         player.seekTo(perfectTime);
         isPlayerReady = false;
     }
-}, 1000);
+}, 1000);

yad/styles.css

@@ -58,11 +58,29 @@ button:hover {
     background-color: #555;
 }
 
+#explanation {
+    max-width: 750px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+#explanation h2 {
+    color: #333;
+}
+
+#explanation p {
+    color: #666;
+    line-height: 1.5;
+}
+
 .iframe-container {
     margin: 50px auto;
     position: relative;
     overflow: hidden;
-    width: 80%;
+    width: 100%;
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
 }