Update 3.show-result-texts-on-the-video.html

Author: Keillion

4.use-case/3.show-result-texts-on-the-video.html

@@ -25,7 +25,7 @@
         word-break: break-all;
         word-wrap: break-word;
         box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.2);
-        transform: translate(-50%, -4px);
+        transform: translate(-50%, calc(-100% - 4px));
       }
       .bubble-box::after{
         content: '';
@@ -116,15 +116,15 @@
               if (bodyStyle.position === "static") {
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2}px`,
-                  bottom: `${document.documentElement.clientHeight  - convertedP1.y}px`,
+                  top: `${convertedP1.y}px`,
                 });
               } else { // if you set body `position` as `relative`, `absolute`, things can get complicated
                 const bodyRect = document.body.getBoundingClientRect();
                 const bodyBorderLeft = parseFloat(bodyStyle.borderLeftWidth);
                 const bodyBorderBottom = parseFloat(bodyStyle.borderBottomWidth);
                 Object.assign(divInf.style, {
                   left: `${(convertedP1.x + convertedP2.x) / 2 - bodyRect.left - bodyBorderLeft}px`,
-                  bottom: `${bodyRect.bottom - convertedP1.y - bodyBorderBottom}px`,
+                  top: `${convertedP1.y - bodyRect.top - bodyBorderBottom}px`,
                 });
               }
               divInf.innerText = result.barcodeText;