fix ratio issue when using titel

script.js

@@ -58,6 +58,8 @@ let previousMovies = [];
 let forwardMovies = [];
 let monitorOutroInterval = null; // Global interval variable to monitor the outro segment of the trailer
 let isMuted = startTrailerMuted; userInteracted = false;
+const baseBackdropOverlapVW = 11.4;
+let activeTrailerLayout = null;
 
 
 // Get the current browser language
@@ -161,6 +163,7 @@ function isMobile() {
 const truncateText = (text, maxLength) => text.length > maxLength ? text.substr(0, maxLength) + '...' : text;
 
 const cleanup = () => {
+    clearTrailerLayout();
     if (player && typeof player.destroy === 'function') {
         player.destroy();
     }
@@ -172,6 +175,123 @@ const cleanup = () => {
     if (container) container.innerHTML = '';
 };
 
+const clearTrailerLayout = () => {
+    if (!activeTrailerLayout) {
+        return;
+    }
+
+    const { videoContainer, backdrop, plot, genres, loremIpsum, logo } = activeTrailerLayout;
+
+    if (videoContainer) {
+        videoContainer.style.removeProperty('width');
+    }
+
+    if (backdrop) {
+        backdrop.style.removeProperty('width');
+        backdrop.style.removeProperty('left');
+    }
+
+    if (plot) {
+        plot.style.removeProperty('left');
+        plot.style.removeProperty('max-width');
+    }
+
+    if (genres) {
+        genres.style.removeProperty('left');
+    }
+
+    if (loremIpsum) {
+        loremIpsum.style.removeProperty('left');
+    }
+
+    if (logo) {
+        logo.style.removeProperty('left');
+    }
+
+    activeTrailerLayout = null;
+};
+
+const applyTrailerLayout = (videoContainer) => {
+    if (!videoContainer) {
+        return;
+    }
+
+    if (activeTrailerLayout && activeTrailerLayout.videoContainer !== videoContainer) {
+        clearTrailerLayout();
+    }
+
+    const slideWrapper = videoContainer.closest('.slide-wrapper');
+    if (!slideWrapper) {
+        return;
+    }
+
+    const slideElement = slideWrapper.querySelector('.slide');
+    const containerRect = videoContainer.getBoundingClientRect();
+    const slideRect = slideElement ? slideElement.getBoundingClientRect() : null;
+    const effectiveHeight = containerRect.height || (slideRect ? slideRect.height : 0);
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 1920;
+
+    if (!effectiveHeight || !viewportWidth) {
+        return;
+    }
+
+    const idealWidthVw = (effectiveHeight * (16 / 9)) / viewportWidth * 100;
+    const videoWidthVw = Math.max(idealWidthVw, 18);
+    const videoWidthVwCapped = Math.min(videoWidthVw, 34.4);
+    const videoWidthVwRounded = Math.min(Math.max(videoWidthVwCapped, 10), 60);
+
+    const backdrop = slideWrapper.querySelector('.backdrop');
+    const plot = slideWrapper.querySelector('.plot');
+    const genres = slideWrapper.querySelector('.genres');
+    const loremIpsum = slideWrapper.querySelector('.lorem-ipsum');
+    const logo = slideWrapper.querySelector('.logo');
+
+    videoContainer.style.width = `${videoWidthVwRounded.toFixed(3)}vw`;
+
+    if (backdrop) {
+        const backdropGap = Math.max(videoWidthVwRounded - baseBackdropOverlapVW, 0).toFixed(3);
+        backdrop.style.width = `calc(100% - ${backdropGap}vw)`;
+        backdrop.style.left = '0';
+    }
+
+    if (plot) {
+        const availableAreaVw = Math.max(100 - videoWidthVwRounded, 20);
+        const maxWidth = Math.max(availableAreaVw - 4, 30).toFixed(3);
+        plot.style.left = `calc(50% - ${(videoWidthVwRounded / 2).toFixed(3)}vw)`;
+        plot.style.maxWidth = `${maxWidth}vw`;
+    }
+
+    const anchorShift = `calc(50% - ${(videoWidthVwRounded / 2).toFixed(3)}vw)`;
+    if (genres) {
+        genres.style.left = anchorShift;
+    }
+
+    if (loremIpsum) {
+        loremIpsum.style.left = anchorShift;
+    }
+
+    if (logo) {
+        logo.style.left = anchorShift;
+    }
+
+    activeTrailerLayout = {
+        videoContainer,
+        backdrop,
+        plot,
+        genres,
+        loremIpsum,
+        logo
+    };
+};
+
+window.addEventListener('resize', () => {
+    if (activeTrailerLayout && document.contains(activeTrailerLayout.videoContainer)) {
+        applyTrailerLayout(activeTrailerLayout.videoContainer);
+    } else {
+        activeTrailerLayout = null;
+    }
+});
+
 const createSlideElement = (movie, hasVideo = false) => {
     cleanup();
     isMuted = startTrailerMuted;
@@ -400,33 +520,11 @@ const createSlideElement = (movie, hasVideo = false) => {
                     player.setVolume(unmutedVolume); // Set the volume, value between 0 and 100
                     console.log(`Playing trailer for '${movie.Name}'`);
                 },
-                'onStateChange': () => {
+                'onStateChange': (event) => {
-                    if (player.getPlayerState() === YT.PlayerState.PLAYING) {
+                    if (event.data === YT.PlayerState.PLAYING) {
-                        // Only show when YT video is successfully playing
+                        applyTrailerLayout(videoContainer);
-                        const backdrop = document.querySelector('.backdrop');
+                    } else if (event.data === YT.PlayerState.ENDED) {
-                        if (backdrop) {
+                        clearTrailerLayout();
-                            backdrop.style.width = 'calc(100% - 23vw)';
-                            backdrop.style.left = '0vw';
-                        }
-                        const plot = document.querySelector('.plot');
-                        if (plot) {
-                            plot.style.left = '33vw';
-                            plot.style.maxWidth = '63vw';
-                        }
-
-                        const genres = document.querySelector('.genres');
-                        if (genres) {
-                            genres.style.left = 'calc(50% - 17vw)';
-                        }
-
-                        const loremIpsum = document.querySelector('.lorem-ipsum');
-                        if (loremIpsum) loremIpsum.style.left = 'calc(50% - 17vw)';
-
-                        const logo = document.querySelector('.logo');
-                        if (logo) logo.style.left = 'calc(50% - 17vw)';
-
-                        videoContainer.style.width = '34.4vw';
-                    } else if (player.getPlayerState() === YT.PlayerState.ENDED) {
                         clearMonitorOutroInterval();
                         setTimeout(fetchRandomMovie, 20);
                     }
@@ -439,19 +537,7 @@ const createSlideElement = (movie, hasVideo = false) => {
                         player = null;
                     }
 
-                    // Reset style when a YT error occurs
+                    clearTrailerLayout();
-                    const backdrop = document.querySelector('.backdrop');
-                    if (backdrop) backdrop.style.width = '100%';
-
-                    const plot = document.querySelector('.plot');
-                    if (plot) plot.style.width = '98%';
-
-                    const loremIpsum = document.querySelector('.lorem-ipsum');
-                    if (loremIpsum) loremIpsum.style.paddingRight = '0';
-
-                    const logo = document.querySelector('.logo');
-                    if (logo) logo.style.left = '50%';
-
                     videoContainer.style.width = '0';
 
                     startSlideChangeTimer();