Fixing issues; bumped to 1.6.3

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Better Youtube +",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Enhancements for Youtube to have a better experience.",
 
   "browser_specific_settings": {

src/scripts/betterYoutube.js

@@ -47,7 +47,7 @@
     </ul>
     `
     const popedContainerTemplate = `
-    <div id="draggable" style="display:none; block; top: 114px; left: 408px;">
+    <div id="ytDraggable" style="display:none; bottom: 0px; right: 0px;">
         <iframe id="popIframe" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
         autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0" src="" />
         </iframe>
@@ -95,14 +95,28 @@
                 count++;
             }
         }
-    }, 500); // check every 500ms
+    }, 500);
 
     const setupProcess = () => {
         loadUI();
-        setupVariables();
+        setupVariables().then(() => {
+            let tid = -1;
+
+            function timer() {
+                // Video Controler
+                video  = document.getElementsByTagName("video")[0];
+
+                if (video) {
+                    clearInterval(tid);
+
                     fillUIAndSetupEvents();
                     setupObservers();
                 }
+            }
+
+            tid = setInterval(timer, 1000);
+        });
+    }
 
     const loadUI = () => {
         // Look to add saving image from video elm.
@@ -132,7 +146,7 @@
         }
     }
 
-    const setupVariables = () => {
+    const setupVariables = async () => {
         ytEnhancerMenu2  = document.getElementById("enhancerMenuID2");
         ytThumbnailBttn  = document.getElementById("ytThumbnailBttn");
         ytLoopBttn       = document.getElementById("ytLoopBttn");
@@ -154,13 +168,10 @@
         ytMqDefaultImg   = document.getElementById("ytMqDefaultImgID");
         ytSdDefaultImg   = document.getElementById("ytSdDefaultImgID");
 
-        poppedContainer  = document.getElementById("draggable");
+        poppedContainer  = document.getElementById("ytDraggable");
         ytIfrm           = document.getElementById("popIframe");
         slugInputTag     = document.getElementById("slugCopyZone");
 
-        // Video Controler
-        video  = document.getElementsByTagName("video")[0];  // Actual video object (I think...)
-
         // Container of actual player (Used for floating window)
         containerOfPlyrWndow = document.getElementById("player-container");
         part   = "https://img.youtube.com/vi/";
@@ -222,7 +233,10 @@
                 controlsShowHideToggle(mutation.target);
             } else if (mutation.type === 'childList') {
                 if (this.isEndlessWatch) {
-                    let elm = document.querySelector(dialogElementQueryRef).parentElement;
+                    let target = document.querySelector(dialogElementQueryRef);
+                    if (!target) continue
+
+                    let elm = target.parentElement;
                     elmDisplayState = elm.style.display;
                     if (elmDisplayState !== 'none' && modalHasBeenClosed == false) {
                         modalHasBeenClosed = true;

src/styles/betterYoutube.css

@@ -25,7 +25,7 @@ yt-formatted-string > a:hover {
     color: #ffffff;
 }
 
-#enhancerMenuID, #enhancerMenuID2 {
+#enhancerMenuID, #enhancerMenuID2, #ytThumbMenuID {
     z-index: 9999;
 }
 
@@ -36,7 +36,7 @@ yt-formatted-string > a:hover {
     text-align: center;
 }
 
-#draggable {
+#ytDraggable {
     z-index: 9999;
     position: fixed;
     right: 0px;