From 9ffd275a7a558ad7618cd3ca6cb3b9be013193f7 Mon Sep 17 00:00:00 2001
From: Ron Nuss <shalom@itsron.space>
Date: Tue, 11 Jul 2023 09:45:15 +0000
Subject: [PATCH] Fixed wide img for shorts

---
 mrbeastify.js | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/mrbeastify.js b/mrbeastify.js
index 2c2b882..e75dbdf 100644
--- a/mrbeastify.js
+++ b/mrbeastify.js
@@ -7,11 +7,26 @@ function applyOverlay(thumbnailElement, overlayImageUrl, flip) {
   const overlayImage = document.createElement("img");
   overlayImage.src = overlayImageUrl;
   overlayImage.style.position = "absolute";
-  overlayImage.style.top = "0";
-  overlayImage.style.left = "0";
-  overlayImage.style.width = "100%";
-  overlayImage.style.height = "100%";
-  overlayImage.style.zIndex = "0"; // Ensure overlay is on top
+
+  const aspectRatio = thumbnailElement.clientWidth / thumbnailElement.clientHeight;
+  // Calculate the aspect ratio
+
+  // Check if the aspect ratio matches a "131 × 238 px" thumbnail (If it's a short thumbnail)
+  if (Math.abs(aspectRatio - (131 / 238)) < 0.01) {
+    // Apply specific CSS for "131 × 238 px" thumbnails
+    overlayImage.style.top = "123px";
+    overlayImage.style.left = "-3px";
+    overlayImage.style.width = "160%";
+    overlayImage.style.height = "50%";
+    overlayImage.style.zIndex = "0";
+  } else {
+    // Apply default CSS for other thumbnails
+    overlayImage.style.top = "0";
+    overlayImage.style.left = "0";
+    overlayImage.style.width = "100%";
+    overlayImage.style.height = "100%";
+    overlayImage.style.zIndex = "0";
+  }
 
   if (flip) {
     overlayImage.style.transform = "scaleX(-1)"; // Flip the image horizontally
@@ -24,6 +39,7 @@ function applyOverlay(thumbnailElement, overlayImageUrl, flip) {
   thumbnailElement.parentElement.appendChild(overlayImage);
 }
 
+
 // Looks for all thumbnails and applies overlay
 function applyOverlayToThumbnails() {
   // Query all YouTube video thumbnails on the page that haven't been processed yet