Alvin Soprano – Streaming<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Oswald:wght@400;700&display=swap\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #000000;\n color: #e5e5e5;\n overflow-x: hidden;\n }\n .oswald-font {\n font-family: 'Oswald', sans-serif;\n }\n .text-shadow {\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);\n }\n .movie-card {\n position: relative;\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n border-radius: 0.5rem;\n overflow: hidden;\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n display: inline-block;\n width: 150px;\n flex-shrink: 0;\n margin-right: 15px;\n }\n @media (min-width: 768px) {\n .movie-card {\n width: 200px;\n }\n }\n .movie-card:hover {\n transform: scale(1.1);\n z-index: 10;\n }\n .movie-poster {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 0.5rem;\n }\n \n .carousel-container {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n white-space: nowrap;\n padding-bottom: 10px;\n }\n .carousel-container::-webkit-scrollbar {\n height: 8px;\n }\n .carousel-container::-webkit-scrollbar-thumb {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n }\n .carousel-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n \/* The modal overlay for the pop-up *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 30;\n }\n .modal-overlay.visible {\n display: flex;\n }\n \/* Ensure modal takes full screen when in fullscreen mode *\/\n .modal-overlay:fullscreen {\n background-color: #000;\n }\n \n \/* Container for the video and info card inside the modal *\/\n .preview-group {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: #1a1a1a;\n border-radius: 0.5rem;\n box-shadow: 0 0 40px rgba(0,0,0,0.8);\n max-width: 90%;\n max-height: 90%;\n padding: 1rem;\n position: relative;\n overflow-y: auto;\n transition: all 0.3s ease-in-out;\n }\n \/* Class to handle fullscreen mode specifically for hiding other elements *\/\n .preview-group.in-fullscreen {\n max-width: 100%;\n max-height: 100%;\n padding: 0;\n border-radius: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #000;\n }\n \n @media (min-width: 768px) {\n .preview-group {\n flex-direction: row;\n padding: 1.5rem;\n }\n }\n \n .video-preview {\n flex-shrink: 0;\n width: 100%;\n height: 180px;\n background-color: #000;\n border-radius: 0.5rem;\n }\n .preview-group.in-fullscreen .video-preview {\n width: 100vw;\n height: 100vh;\n }\n @media (min-width: 768px) {\n .video-preview {\n width: 320px;\n height: 180px;\n }\n }\n .video-preview iframe {\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n }\n .preview-group.in-fullscreen .movie-info-card,\n .preview-group.in-fullscreen .close-button {\n display: none;\n }\n\n .movie-info-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n \n .info-section {\n margin-bottom: 1rem;\n }\n .info-section p, .info-section span, .info-section li {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n @media (min-width: 768px) {\n .info-section p, .info-section span, .info-section li {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n }\n\n .movie-info-card #movie-info-description {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n @media (min-width: 768px) {\n .movie-info-card #movie-info-description {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n }\n \n .info-section strong {\n font-weight: 600;\n color: #e5e5e5;\n }\n\n .close-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n color: #fff;\n font-size: 1.75rem;\n cursor: pointer;\n z-index: 40;\n transition: color 0.3s;\n }\n .close-button:hover {\n color: #e5e5e5;\n }\n .mobile-nav-menu {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n z-index: 50;\n transform: translateY(-100%);\n transition: transform 0.3s ease-in-out;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n .mobile-nav-menu.open {\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"selection:bg-red-600 selection:text-white\">\n\n \n <header class=\"bg-gradient-to-b from-black to-transparent shadow-xl p-4 md:px-8 sticky top-0 z-20\">\n <div class=\"container mx-auto flex justify-between items-center w-full\">\n <div class=\"flex items-center space-x-4\">\n <img decoding=\"async\" src=\"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/Soprano_Productions_Background_Removed_Clean-e1754006644432.png\" alt=\"Soprano Productions Logo\" class=\"h-16 md:h-20\">\n <nav class=\"hidden md:block\">\n <ul class=\"flex space-x-6 text-lg font-semibold oswald-font uppercase\">\n <li><a href=\"https:\/\/alvinsoprano.com\" class=\"text-white hover:text-gray-300 transition-colors\">HOME<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors\">SERIES<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors\">MOVIES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/div>\n \n <button id=\"mobile-menu-btn\" class=\"md:hidden text-white focus:outline-none\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n \n <nav id=\"mobile-nav\" class=\"mobile-nav-menu\">\n <button id=\"close-mobile-menu-btn\" class=\"absolute top-4 right-4 text-white text-3xl\">×<\/button>\n <ul class=\"flex flex-col space-y-8 text-3xl font-semibold oswald-font uppercase text-center\">\n <li><a href=\"https:\/\/alvinsoprano.com\" class=\"text-white hover:text-gray-300 transition-colors block\">HOME<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors block\">SERIES<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors block\">MOVIES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n\n \n <section id=\"hero-section\" class=\"relative h-screen flex items-center w-full bg-gradient-to-r from-black via-transparent to-transparent\">\n <img decoding=\"async\" id=\"hero-bg-image\" src=\"\" alt=\"Hero Background\" class=\"absolute inset-0 w-full h-full object-cover z-0 transition-opacity duration-500 opacity-100\">\n\n <div id=\"hero-video-container\" class=\"absolute inset-0 w-full h-full z-0 opacity-0 transition-opacity duration-500\">\n <iframe loading=\"lazy\" id=\"hero-video-iframe\"\n width=\"100%\"\n height=\"100%\"\n src=\"\"\n title=\"Movie Preview\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n\n <div id=\"hero-text-content\" class=\"z-10 text-white w-full md:w-1\/2 px-4 md:pl-12 transition-opacity duration-500\">\n <h2 id=\"hero-title\" class=\"text-xl md:text-7xl lg:text-9xl font-bold oswald-font mb-2 md:mb-4 text-shadow\"><\/h2>\n <p id=\"hero-description\" class=\"text-xs md:text-xl mb-4 md:mb-6 text-shadow\"><\/p>\n <div class=\"flex space-x-2 md:space-x-4\">\n \n <button id=\"hero-play-btn\" class=\"flex items-center bg-white text-black font-semibold py-1 px-3 md:py-2 md:px-6 rounded-full hover:bg-gray-200 transition-colors text-xs md:text-base\">\n <svg class=\"w-4 h-4 mr-1 md:w-5 md:h-5 md:mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\"><\/path><\/svg>\n PLAY\n <\/button>\n <button id=\"hero-more-info-btn\" class=\"flex items-center bg-gray-600 bg-opacity-70 text-white font-semibold py-1 px-3 md:py-2 md:px-6 rounded-full hover:bg-gray-500 transition-colors text-xs md:text-base\">\n <svg class=\"w-4 h-4 mr-1 md:w-5 md:h-5 md:mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 12a2 2 0 100-4 2 2 0 000 4z\"><\/path><path fill-rule=\"evenodd\" d=\"M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z\" clip-rule=\"evenodd\"><\/path><\/svg>\n MORE INFO\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <main class=\"container mx-auto p-4 md:px-12 w-full\">\n <section class=\"mb-8\">\n <h3 class=\"text-2xl md:text-4xl font-bold oswald-font mb-4\">AVAILABLE FOR STREAM<\/h3>\n <div id=\"carousel-1\" class=\"carousel-container flex\">\n <\/div>\n <\/section>\n\n \n <div id=\"modal-overlay\" class=\"modal-overlay\">\n <div id=\"preview-group\" class=\"preview-group\">\n <button id=\"close-modal-btn\" class=\"close-button\">×<\/button>\n <div id=\"video-preview-modal\" class=\"video-preview\">\n <iframe loading=\"lazy\" id=\"video-preview-iframe\"\n width=\"100%\"\n height=\"100%\"\n src=\"\"\n title=\"Movie Preview\"\n frameborder=\"0\"\n allow=\"autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n <div id=\"movie-info-card\" class=\"movie-info-card\">\n <h3 id=\"movie-info-title\" class=\"text-xl md:text-3xl font-bold text-red-500 mb-2 oswald-font\"><\/h3>\n <div class=\"info-section\">\n <p id=\"movie-info-description\" class=\"text-sm md:text-lg text-gray-300\"><\/p>\n <\/div>\n <div class=\"info-section\">\n <p class=\"font-semibold text-white text-xs md:text-base\">Directed by: <span id=\"movie-info-director\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Written by: <span id=\"movie-info-writer\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Produced by: <span id=\"movie-info-producer\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Music by: <span id=\"movie-info-music\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <\/div>\n <div class=\"info-section\">\n <p class=\"font-semibold text-white text-xs md:text-base mb-1\">Cast:<\/p>\n <ul id=\"movie-info-cast-list\" class=\"list-none m-0 p-0 text-xs md:text-base text-gray-300\">\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Movie data with detailed information\n const movies = [\n {\n title: \"BONE-SKINNY\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/bone-skinny-682x1024.jpg\",\n backdrop: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/07\/zzPD1AdSS5C67vLtg96SHMoBDs1.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/oBwsIvUkBzM?si=L97OyzrOp9qCVKc8\",\n available: true,\n description: \"In this animated horror machinima created with The Sims 4, Chloe Winston struggles with toxic diet culture and falls victim to a cursed herbal supplement, MagicSlim, that leads to supernatural consequences and haunting transformation.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob Chambers\",\n cast: [\n { name: \"Scarlett Marianna Barnes\", character: \"Chloe Winston\" },\n { name: \"Alvin Soprano\", character: \"Ophelia (witch\/telemarketer)\" },\n { name: \"Silvio Castiglione\", character: \"Infomercial Host\" }\n ]\n },\n {\n title: \"DRAINED\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/MV5BMmU3NjQxZDQtMjE3Ni00OGRjLWE4YTYtODE2MjBiOTY0YzRhXkEyXkFqcGc@._V1_FMjpg_UX1000_-724x1024.jpg\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/qCosDYxsmoGZPt5z9a6MzP9suaD.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/JgkGv9z83sw?si=ZN0IyMXA8puf3Rmw\",\n available: true,\n description: \"When truck driver Teddy makes a late-night stop at a remote gas station, he meets a mysterious woman named Katerina. Their flirtatious encounter quickly twists into something deadly, as Katerina reveals her supernatural power to drain life. A short horror thriller machinima created in The Sims 4, Drained explores themes of toxic masculinity, feminism, and power through a darkly stylish visual lens.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob Chambers\",\n cast: [\n { name: \"Roman Castiglione\", character: \"Teddy\" },\n { name: \"Alvin Soprano\", character: \"Katerina\" }\n ]\n },\n {\n title: \"REST IN PIECES\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/MV5BOTBiYjMwMjMtODZjMi00MDFjLTliYTAtNjA3N2RmNDY1NDk2XkEyXkFqcGc@._V1_FMjpg_UX1000_-724x1024.jpg\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/ectwwZI4Krw58QB0JL0tDe32evP.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/hmiFbqPzct0?si=b0UvlpM8_4dgABLf\",\n available: true,\n description: \"Set entirely in a snow-covered graveyard, Rest in Pieces follows Chris Edwards, a man who wakes up disoriented beside a nameless tombstone. As he stumbles through the night, haunted by his inner voice and a looping reality, he begins to piece together the chilling truth about his existence. Filmed in GTA V with first-person perspective and experimental editing, the film explores identity, death, and the inescapability of fate.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob William Chambers\",\n cast: [\n { name: \"Aaron Landon Jackson\", character: \"Chris Edwards\" }\n ]\n },\n {\n title: \"GOODBYE MOMMY\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/07\/Screenshot-2025-01-29-at-20-01-02-Goodbye-Mommy-2024.png\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/96chZtIQqucvpBvYW9OetdsN67x-scaled.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/qib_5RUb9Sc?si=3gMzorW0rb42Fc7f\",\n available: true,\n description: \"Set during a power outage on a stormy winter night, Goodbye Mommy follows young Lucy as she wanders through her dimly lit home after a series of electrical flickers. Drawn by a loud noise at the front door, she discovers her recently deceased mother standing eerily in the storm, slowly ascending into a bright supernatural light. But when Lucy calls out to her, the mother turns and begins walking toward her\u2014possessed. A chilling encounter unfolds as Lucy must face the horror of grief and demonic illusion.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob William Chambers\",\n cast: [\n { name: \"Alvin Soprano\", character: \"Mother\" },\n { name: \"Belinda Soprano\", character: \"Lucy\" }\n ]\n }\n ];\n \n const modalOverlay = document.getElementById('modal-overlay');\n const videoPreviewIframe = document.getElementById('video-preview-iframe');\n const movieInfoTitle = document.getElementById('movie-info-title');\n const movieInfoDescription = document.getElementById('movie-info-description');\n const movieInfoDirector = document.getElementById('movie-info-director');\n const movieInfoWriter = document.getElementById('movie-info-writer');\n const movieInfoProducer = document.getElementById('movie-info-producer');\n const movieInfoMusic = document.getElementById('movie-info-music');\n const movieInfoCastList = document.getElementById('movie-info-cast-list');\n const closeModalBtn = document.getElementById('close-modal-btn');\n const previewGroup = document.getElementById('preview-group');\n \n \/\/ Mobile navigation elements\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\n const closeMobileMenuBtn = document.getElementById('close-mobile-menu-btn');\n const mobileNavMenu = document.getElementById('mobile-nav');\n\n \/\/ This variable holds the currently displayed movie in the hero section\n let currentHeroMovie = null; \n\n \/\/ Get hero elements\n const heroSection = document.getElementById('hero-section');\n const heroBgImage = document.getElementById('hero-bg-image');\n const heroVideoContainer = document.getElementById('hero-video-container');\n const heroVideoIframe = document.getElementById('hero-video-iframe');\n const heroTitle = document.getElementById('hero-title');\n const heroDescription = document.getElementById('hero-description');\n const heroPlayBtn = document.getElementById('hero-play-btn');\n const heroMoreInfoBtn = document.getElementById('hero-more-info-btn');\n const heroTextContent = document.getElementById('hero-text-content');\n\n \/\/ Function to update the hero section with a specific movie's data\n function setHeroMovie(movie) {\n if (movie) {\n currentHeroMovie = movie;\n \n \/\/ Stop any ongoing hero video playback\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n \n \/\/ Update the text content with a fade effect\n heroTextContent.style.opacity = '0';\n setTimeout(() => {\n heroTitle.textContent = movie.title;\n heroDescription.textContent = movie.description;\n heroTextContent.style.opacity = '1';\n }, 500);\n\n heroBgImage.src = movie.backdrop;\n heroBgImage.alt = `${movie.title} Hero Background`;\n heroVideoIframe.title = `${movie.title} Preview`;\n }\n }\n \n \/\/ Initial render of the hero section with the first movie\n setHeroMovie(movies[0]);\n\n \/\/ Event listener for the \"Play\" button to go full screen on the current page\n heroPlayBtn.addEventListener('click', () => {\n if (currentHeroMovie) {\n \/\/ This will now open the modal and immediately go into full screen\n openModal(currentHeroMovie, 'fullscreen');\n }\n });\n \n \/\/ Event listener for the \"More Info\" button\n heroMoreInfoBtn.addEventListener('click', () => {\n if (currentHeroMovie) {\n \/\/ This will open the modal and start the video playing automatically\n openModal(currentHeroMovie, 'autoplay-only');\n }\n });\n\n \/\/ Hero section hover logic to play\/pause video (desktop only)\n \/\/ This is still useful for desktop users to get a quick preview\n heroSection.addEventListener('mouseenter', () => {\n if (currentHeroMovie && currentHeroMovie.embedUrl) {\n heroVideoIframe.src = currentHeroMovie.embedUrl + \"?autoplay=1&mute=1&rel=0\";\n heroVideoContainer.classList.remove('opacity-0');\n heroVideoContainer.classList.add('opacity-100');\n heroBgImage.classList.add('opacity-0');\n }\n });\n heroSection.addEventListener('mouseleave', () => {\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n });\n\n \/\/ Function to open the modal and populate with movie data\n function openModal(movie, playMode) {\n \/\/ Stop any ongoing hero video playback when the modal opens\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n \n movieInfoTitle.textContent = movie.title;\n movieInfoDescription.textContent = movie.description || \"No description available.\";\n movieInfoDirector.textContent = movie.directedBy || \"N\/A\";\n movieInfoWriter.textContent = movie.writtenBy || \"N\/A\";\n movieInfoProducer.textContent = movie.producedBy || \"N\/A\";\n movieInfoMusic.textContent = movie.musicBy || \"N\/A\";\n\n movieInfoCastList.innerHTML = '';\n if (movie.cast && movie.cast.length > 0) {\n movie.cast.forEach(actor => {\n const listItem = document.createElement('li');\n listItem.textContent = `${actor.name} \u2014 ${actor.character}`;\n movieInfoCastList.appendChild(listItem);\n });\n } else {\n movieInfoCastList.innerHTML = '<li>N\/A<\/li>';\n }\n\n if (movie.embedUrl && movie.embedUrl !== \"https:\/\/www.youtube.com\/embed\/placeholder?si=placeholder\") {\n let embedUrl = movie.embedUrl;\n let separator = embedUrl.includes('?') ? '&' : '?';\n if (playMode === 'autoplay-only') {\n \/\/ For autoplay on the info card, the video must be muted to comply with browser policies\n embedUrl += `${separator}autoplay=1&mute=1&rel=0`;\n } else if (playMode === 'fullscreen') {\n \/\/ For fullscreen, we can autoplay without muting\n embedUrl += `${separator}autoplay=1&rel=0`;\n } else {\n \/\/ Default to not autoplaying\n embedUrl += `${separator}rel=0`;\n }\n videoPreviewIframe.src = embedUrl;\n } else {\n videoPreviewIframe.src = \"about:blank\";\n }\n \n if (playMode === 'fullscreen') {\n \/\/ Hide the info card and close button for a true full-screen experience\n previewGroup.classList.add('in-fullscreen');\n } else {\n previewGroup.classList.remove('in-fullscreen');\n }\n\n modalOverlay.classList.add('visible');\n\n if (playMode === 'fullscreen') {\n try {\n if (modalOverlay.requestFullscreen) {\n modalOverlay.requestFullscreen();\n } else if (modalOverlay.mozRequestFullScreen) {\n modalOverlay.mozRequestFullScreen();\n } else if (modalOverlay.webkitRequestFullscreen) {\n modalOverlay.webkitRequestFullscreen();\n } else if (modalOverlay.msRequestFullscreen) {\n modalOverlay.msRequestFullscreen();\n }\n } catch (e) {\n console.error(\"Fullscreen request failed:\", e);\n }\n }\n }\n\n \/\/ Function to close the modal\n function closeModal() {\n modalOverlay.classList.remove('visible');\n videoPreviewIframe.src = \"\";\n \n previewGroup.classList.remove('in-fullscreen');\n\n if (document.fullscreenElement) {\n document.exitFullscreen();\n }\n }\n\n \/\/ Event listeners for the modal\n closeModalBtn.addEventListener('click', closeModal);\n modalOverlay.addEventListener('click', (e) => {\n if (e.target === modalOverlay) {\n closeModal();\n }\n });\n\n \/\/ Handle fullscreen change\n document.addEventListener('fullscreenchange', () => {\n if (!document.fullscreenElement) {\n closeModal();\n }\n });\n\n \/\/ Function to render the video carousel\n function renderCarousel() {\n const carouselContainer = document.getElementById('carousel-1');\n carouselContainer.innerHTML = '';\n movies.forEach(movie => {\n const movieCard = document.createElement('div');\n movieCard.setAttribute('data-movie-title', movie.title);\n movieCard.className = 'movie-card';\n movieCard.innerHTML = `\n <img decoding=\"async\" src=\"${movie.poster}\" alt=\"${movie.title} Poster\" class=\"movie-poster\">\n `;\n movieCard.addEventListener('click', (e) => {\n const clickedTitle = e.currentTarget.getAttribute('data-movie-title');\n const selectedMovie = movies.find(m => m.title === clickedTitle);\n if (selectedMovie) {\n setHeroMovie(selectedMovie);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n });\n carouselContainer.appendChild(movieCard);\n });\n }\n\n \/\/ Mobile menu toggle functionality\n mobileMenuBtn.addEventListener('click', () => {\n mobileNavMenu.classList.add('open');\n });\n closeMobileMenuBtn.addEventListener('click', () => {\n mobileNavMenu.classList.remove('open');\n });\n mobileNavMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n mobileNavMenu.classList.remove('open');\n });\n });\n\n\n \/\/ Initial load of the page\n setHeroMovie(movies[0]);\n renderCarousel();\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Alvin Soprano – Streaming HOME SERIES MOVIES × HOME SERIES MOVIES PLAY MORE INFO AVAILABLE FOR STREAM × Directed by: Written by: Produced by: Music by: Cast:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":2,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2025-08-01T15:06:02","date_gmt":"2025-08-01T15:06:02","guid":{"rendered":"https:\/\/alvinsoprano.com\/stream\/?page_id=8"},"modified":"2025-08-01T15:13:29","modified_gmt":"2025-08-01T15:13:29","slug":"soprano-productions","status":"publish","type":"page","link":"https:\/\/alvinsoprano.com\/stream\/","title":{"rendered":"SOPRANO PRODUCTIONS"},"content":{"rendered":"\n\n\n\n \n \n Alvin Soprano – Streaming<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Oswald:wght@400;700&display=swap\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #000000;\n color: #e5e5e5;\n overflow-x: hidden;\n }\n .oswald-font {\n font-family: 'Oswald', sans-serif;\n }\n .text-shadow {\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);\n }\n .movie-card {\n position: relative;\n cursor: pointer;\n transition: transform 0.2s ease-in-out;\n border-radius: 0.5rem;\n overflow: hidden;\n box-shadow: 0 4px 10px rgba(0,0,0,0.3);\n display: inline-block;\n width: 150px;\n flex-shrink: 0;\n margin-right: 15px;\n }\n @media (min-width: 768px) {\n .movie-card {\n width: 200px;\n }\n }\n .movie-card:hover {\n transform: scale(1.1);\n z-index: 10;\n }\n .movie-poster {\n width: 100%;\n height: auto;\n display: block;\n border-radius: 0.5rem;\n }\n \n .carousel-container {\n overflow-x: auto;\n -webkit-overflow-scrolling: touch;\n white-space: nowrap;\n padding-bottom: 10px;\n }\n .carousel-container::-webkit-scrollbar {\n height: 8px;\n }\n .carousel-container::-webkit-scrollbar-thumb {\n background-color: rgba(255, 255, 255, 0.2);\n border-radius: 10px;\n }\n .carousel-container::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n \/* The modal overlay for the pop-up *\/\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n display: none;\n justify-content: center;\n align-items: center;\n z-index: 30;\n }\n .modal-overlay.visible {\n display: flex;\n }\n \/* Ensure modal takes full screen when in fullscreen mode *\/\n .modal-overlay:fullscreen {\n background-color: #000;\n }\n \n \/* Container for the video and info card inside the modal *\/\n .preview-group {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n background-color: #1a1a1a;\n border-radius: 0.5rem;\n box-shadow: 0 0 40px rgba(0,0,0,0.8);\n max-width: 90%;\n max-height: 90%;\n padding: 1rem;\n position: relative;\n overflow-y: auto;\n transition: all 0.3s ease-in-out;\n }\n \/* Class to handle fullscreen mode specifically for hiding other elements *\/\n .preview-group.in-fullscreen {\n max-width: 100%;\n max-height: 100%;\n padding: 0;\n border-radius: 0;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n background-color: #000;\n }\n \n @media (min-width: 768px) {\n .preview-group {\n flex-direction: row;\n padding: 1.5rem;\n }\n }\n \n .video-preview {\n flex-shrink: 0;\n width: 100%;\n height: 180px;\n background-color: #000;\n border-radius: 0.5rem;\n }\n .preview-group.in-fullscreen .video-preview {\n width: 100vw;\n height: 100vh;\n }\n @media (min-width: 768px) {\n .video-preview {\n width: 320px;\n height: 180px;\n }\n }\n .video-preview iframe {\n width: 100%;\n height: 100%;\n border-radius: 0.5rem;\n }\n .preview-group.in-fullscreen .movie-info-card,\n .preview-group.in-fullscreen .close-button {\n display: none;\n }\n\n .movie-info-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n }\n \n .info-section {\n margin-bottom: 1rem;\n }\n .info-section p, .info-section span, .info-section li {\n font-size: 0.875rem;\n line-height: 1.25rem;\n }\n @media (min-width: 768px) {\n .info-section p, .info-section span, .info-section li {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n }\n\n .movie-info-card #movie-info-description {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n @media (min-width: 768px) {\n .movie-info-card #movie-info-description {\n font-size: 1.125rem;\n line-height: 1.75rem;\n }\n }\n \n .info-section strong {\n font-weight: 600;\n color: #e5e5e5;\n }\n\n .close-button {\n position: absolute;\n top: 10px;\n right: 10px;\n background: none;\n border: none;\n color: #fff;\n font-size: 1.75rem;\n cursor: pointer;\n z-index: 40;\n transition: color 0.3s;\n }\n .close-button:hover {\n color: #e5e5e5;\n }\n .mobile-nav-menu {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.95);\n z-index: 50;\n transform: translateY(-100%);\n transition: transform 0.3s ease-in-out;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n }\n .mobile-nav-menu.open {\n transform: translateY(0);\n }\n <\/style>\n<\/head>\n<body class=\"selection:bg-red-600 selection:text-white\">\n\n \n <header class=\"bg-gradient-to-b from-black to-transparent shadow-xl p-4 md:px-8 sticky top-0 z-20\">\n <div class=\"container mx-auto flex justify-between items-center w-full\">\n <div class=\"flex items-center space-x-4\">\n <img decoding=\"async\" src=\"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/Soprano_Productions_Background_Removed_Clean-e1754006644432.png\" alt=\"Soprano Productions Logo\" class=\"h-16 md:h-20\">\n <nav class=\"hidden md:block\">\n <ul class=\"flex space-x-6 text-lg font-semibold oswald-font uppercase\">\n <li><a href=\"https:\/\/alvinsoprano.com\" class=\"text-white hover:text-gray-300 transition-colors\">HOME<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors\">SERIES<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors\">MOVIES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/div>\n \n <button id=\"mobile-menu-btn\" class=\"md:hidden text-white focus:outline-none\">\n <svg class=\"w-8 h-8\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path>\n <\/svg>\n <\/button>\n <\/div>\n \n <nav id=\"mobile-nav\" class=\"mobile-nav-menu\">\n <button id=\"close-mobile-menu-btn\" class=\"absolute top-4 right-4 text-white text-3xl\">×<\/button>\n <ul class=\"flex flex-col space-y-8 text-3xl font-semibold oswald-font uppercase text-center\">\n <li><a href=\"https:\/\/alvinsoprano.com\" class=\"text-white hover:text-gray-300 transition-colors block\">HOME<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors block\">SERIES<\/a><\/li>\n <li><a href=\"#\" class=\"text-white hover:text-gray-300 transition-colors block\">MOVIES<\/a><\/li>\n <\/ul>\n <\/nav>\n <\/header>\n\n \n <section id=\"hero-section\" class=\"relative h-screen flex items-center w-full bg-gradient-to-r from-black via-transparent to-transparent\">\n <img decoding=\"async\" id=\"hero-bg-image\" src=\"\" alt=\"Hero Background\" class=\"absolute inset-0 w-full h-full object-cover z-0 transition-opacity duration-500 opacity-100\">\n\n <div id=\"hero-video-container\" class=\"absolute inset-0 w-full h-full z-0 opacity-0 transition-opacity duration-500\">\n <iframe loading=\"lazy\" id=\"hero-video-iframe\"\n width=\"100%\"\n height=\"100%\"\n src=\"\"\n title=\"Movie Preview\"\n frameborder=\"0\"\n allow=\"autoplay; encrypted-media; gyroscope; picture-in-picture\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n\n <div id=\"hero-text-content\" class=\"z-10 text-white w-full md:w-1\/2 px-4 md:pl-12 transition-opacity duration-500\">\n <h2 id=\"hero-title\" class=\"text-xl md:text-7xl lg:text-9xl font-bold oswald-font mb-2 md:mb-4 text-shadow\"><\/h2>\n <p id=\"hero-description\" class=\"text-xs md:text-xl mb-4 md:mb-6 text-shadow\"><\/p>\n <div class=\"flex space-x-2 md:space-x-4\">\n \n <button id=\"hero-play-btn\" class=\"flex items-center bg-white text-black font-semibold py-1 px-3 md:py-2 md:px-6 rounded-full hover:bg-gray-200 transition-colors text-xs md:text-base\">\n <svg class=\"w-4 h-4 mr-1 md:w-5 md:h-5 md:mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\"><\/path><\/svg>\n PLAY\n <\/button>\n <button id=\"hero-more-info-btn\" class=\"flex items-center bg-gray-600 bg-opacity-70 text-white font-semibold py-1 px-3 md:py-2 md:px-6 rounded-full hover:bg-gray-500 transition-colors text-xs md:text-base\">\n <svg class=\"w-4 h-4 mr-1 md:w-5 md:h-5 md:mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M10 12a2 2 0 100-4 2 2 0 000 4z\"><\/path><path fill-rule=\"evenodd\" d=\"M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z\" clip-rule=\"evenodd\"><\/path><\/svg>\n MORE INFO\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <main class=\"container mx-auto p-4 md:px-12 w-full\">\n <section class=\"mb-8\">\n <h3 class=\"text-2xl md:text-4xl font-bold oswald-font mb-4\">AVAILABLE FOR STREAM<\/h3>\n <div id=\"carousel-1\" class=\"carousel-container flex\">\n <\/div>\n <\/section>\n\n \n <div id=\"modal-overlay\" class=\"modal-overlay\">\n <div id=\"preview-group\" class=\"preview-group\">\n <button id=\"close-modal-btn\" class=\"close-button\">×<\/button>\n <div id=\"video-preview-modal\" class=\"video-preview\">\n <iframe loading=\"lazy\" id=\"video-preview-iframe\"\n width=\"100%\"\n height=\"100%\"\n src=\"\"\n title=\"Movie Preview\"\n frameborder=\"0\"\n allow=\"autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n <div id=\"movie-info-card\" class=\"movie-info-card\">\n <h3 id=\"movie-info-title\" class=\"text-xl md:text-3xl font-bold text-red-500 mb-2 oswald-font\"><\/h3>\n <div class=\"info-section\">\n <p id=\"movie-info-description\" class=\"text-sm md:text-lg text-gray-300\"><\/p>\n <\/div>\n <div class=\"info-section\">\n <p class=\"font-semibold text-white text-xs md:text-base\">Directed by: <span id=\"movie-info-director\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Written by: <span id=\"movie-info-writer\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Produced by: <span id=\"movie-info-producer\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <p class=\"font-semibold text-white text-xs md:text-base\">Music by: <span id=\"movie-info-music\" class=\"font-normal text-gray-300\"><\/span><\/p>\n <\/div>\n <div class=\"info-section\">\n <p class=\"font-semibold text-white text-xs md:text-base mb-1\">Cast:<\/p>\n <ul id=\"movie-info-cast-list\" class=\"list-none m-0 p-0 text-xs md:text-base text-gray-300\">\n <\/ul>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/main>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n \/\/ Movie data with detailed information\n const movies = [\n {\n title: \"BONE-SKINNY\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/bone-skinny-682x1024.jpg\",\n backdrop: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/07\/zzPD1AdSS5C67vLtg96SHMoBDs1.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/oBwsIvUkBzM?si=L97OyzrOp9qCVKc8\",\n available: true,\n description: \"In this animated horror machinima created with The Sims 4, Chloe Winston struggles with toxic diet culture and falls victim to a cursed herbal supplement, MagicSlim, that leads to supernatural consequences and haunting transformation.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob Chambers\",\n cast: [\n { name: \"Scarlett Marianna Barnes\", character: \"Chloe Winston\" },\n { name: \"Alvin Soprano\", character: \"Ophelia (witch\/telemarketer)\" },\n { name: \"Silvio Castiglione\", character: \"Infomercial Host\" }\n ]\n },\n {\n title: \"DRAINED\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/MV5BMmU3NjQxZDQtMjE3Ni00OGRjLWE4YTYtODE2MjBiOTY0YzRhXkEyXkFqcGc@._V1_FMjpg_UX1000_-724x1024.jpg\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/qCosDYxsmoGZPt5z9a6MzP9suaD.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/JgkGv9z83sw?si=ZN0IyMXA8puf3Rmw\",\n available: true,\n description: \"When truck driver Teddy makes a late-night stop at a remote gas station, he meets a mysterious woman named Katerina. Their flirtatious encounter quickly twists into something deadly, as Katerina reveals her supernatural power to drain life. A short horror thriller machinima created in The Sims 4, Drained explores themes of toxic masculinity, feminism, and power through a darkly stylish visual lens.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob Chambers\",\n cast: [\n { name: \"Roman Castiglione\", character: \"Teddy\" },\n { name: \"Alvin Soprano\", character: \"Katerina\" }\n ]\n },\n {\n title: \"REST IN PIECES\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/05\/MV5BOTBiYjMwMjMtODZjMi00MDFjLTliYTAtNjA3N2RmNDY1NDk2XkEyXkFqcGc@._V1_FMjpg_UX1000_-724x1024.jpg\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/ectwwZI4Krw58QB0JL0tDe32evP.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/hmiFbqPzct0?si=b0UvlpM8_4dgABLf\",\n available: true,\n description: \"Set entirely in a snow-covered graveyard, Rest in Pieces follows Chris Edwards, a man who wakes up disoriented beside a nameless tombstone. As he stumbles through the night, haunted by his inner voice and a looping reality, he begins to piece together the chilling truth about his existence. Filmed in GTA V with first-person perspective and experimental editing, the film explores identity, death, and the inescapability of fate.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob William Chambers\",\n cast: [\n { name: \"Aaron Landon Jackson\", character: \"Chris Edwards\" }\n ]\n },\n {\n title: \"GOODBYE MOMMY\",\n poster: \"https:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/07\/Screenshot-2025-01-29-at-20-01-02-Goodbye-Mommy-2024.png\",\n backdrop: \"http:\/\/alvinsoprano.com\/wp-content\/uploads\/2025\/08\/96chZtIQqucvpBvYW9OetdsN67x-scaled.jpg\",\n embedUrl: \"https:\/\/www.youtube.com\/embed\/qib_5RUb9Sc?si=3gMzorW0rb42Fc7f\",\n available: true,\n description: \"Set during a power outage on a stormy winter night, Goodbye Mommy follows young Lucy as she wanders through her dimly lit home after a series of electrical flickers. Drawn by a loud noise at the front door, she discovers her recently deceased mother standing eerily in the storm, slowly ascending into a bright supernatural light. But when Lucy calls out to her, the mother turns and begins walking toward her\u2014possessed. A chilling encounter unfolds as Lucy must face the horror of grief and demonic illusion.\",\n directedBy: \"Alvin Soprano\",\n writtenBy: \"Alvin Soprano\",\n producedBy: \"Alvin Soprano\",\n musicBy: \"Jakob William Chambers\",\n cast: [\n { name: \"Alvin Soprano\", character: \"Mother\" },\n { name: \"Belinda Soprano\", character: \"Lucy\" }\n ]\n }\n ];\n \n const modalOverlay = document.getElementById('modal-overlay');\n const videoPreviewIframe = document.getElementById('video-preview-iframe');\n const movieInfoTitle = document.getElementById('movie-info-title');\n const movieInfoDescription = document.getElementById('movie-info-description');\n const movieInfoDirector = document.getElementById('movie-info-director');\n const movieInfoWriter = document.getElementById('movie-info-writer');\n const movieInfoProducer = document.getElementById('movie-info-producer');\n const movieInfoMusic = document.getElementById('movie-info-music');\n const movieInfoCastList = document.getElementById('movie-info-cast-list');\n const closeModalBtn = document.getElementById('close-modal-btn');\n const previewGroup = document.getElementById('preview-group');\n \n \/\/ Mobile navigation elements\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\n const closeMobileMenuBtn = document.getElementById('close-mobile-menu-btn');\n const mobileNavMenu = document.getElementById('mobile-nav');\n\n \/\/ This variable holds the currently displayed movie in the hero section\n let currentHeroMovie = null; \n\n \/\/ Get hero elements\n const heroSection = document.getElementById('hero-section');\n const heroBgImage = document.getElementById('hero-bg-image');\n const heroVideoContainer = document.getElementById('hero-video-container');\n const heroVideoIframe = document.getElementById('hero-video-iframe');\n const heroTitle = document.getElementById('hero-title');\n const heroDescription = document.getElementById('hero-description');\n const heroPlayBtn = document.getElementById('hero-play-btn');\n const heroMoreInfoBtn = document.getElementById('hero-more-info-btn');\n const heroTextContent = document.getElementById('hero-text-content');\n\n \/\/ Function to update the hero section with a specific movie's data\n function setHeroMovie(movie) {\n if (movie) {\n currentHeroMovie = movie;\n \n \/\/ Stop any ongoing hero video playback\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n \n \/\/ Update the text content with a fade effect\n heroTextContent.style.opacity = '0';\n setTimeout(() => {\n heroTitle.textContent = movie.title;\n heroDescription.textContent = movie.description;\n heroTextContent.style.opacity = '1';\n }, 500);\n\n heroBgImage.src = movie.backdrop;\n heroBgImage.alt = `${movie.title} Hero Background`;\n heroVideoIframe.title = `${movie.title} Preview`;\n }\n }\n \n \/\/ Initial render of the hero section with the first movie\n setHeroMovie(movies[0]);\n\n \/\/ Event listener for the \"Play\" button to go full screen on the current page\n heroPlayBtn.addEventListener('click', () => {\n if (currentHeroMovie) {\n \/\/ This will now open the modal and immediately go into full screen\n openModal(currentHeroMovie, 'fullscreen');\n }\n });\n \n \/\/ Event listener for the \"More Info\" button\n heroMoreInfoBtn.addEventListener('click', () => {\n if (currentHeroMovie) {\n \/\/ This will open the modal and start the video playing automatically\n openModal(currentHeroMovie, 'autoplay-only');\n }\n });\n\n \/\/ Hero section hover logic to play\/pause video (desktop only)\n \/\/ This is still useful for desktop users to get a quick preview\n heroSection.addEventListener('mouseenter', () => {\n if (currentHeroMovie && currentHeroMovie.embedUrl) {\n heroVideoIframe.src = currentHeroMovie.embedUrl + \"?autoplay=1&mute=1&rel=0\";\n heroVideoContainer.classList.remove('opacity-0');\n heroVideoContainer.classList.add('opacity-100');\n heroBgImage.classList.add('opacity-0');\n }\n });\n heroSection.addEventListener('mouseleave', () => {\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n });\n\n \/\/ Function to open the modal and populate with movie data\n function openModal(movie, playMode) {\n \/\/ Stop any ongoing hero video playback when the modal opens\n heroVideoIframe.src = \"\";\n heroVideoContainer.classList.remove('opacity-100');\n heroVideoContainer.classList.add('opacity-0');\n heroBgImage.classList.remove('opacity-0');\n \n movieInfoTitle.textContent = movie.title;\n movieInfoDescription.textContent = movie.description || \"No description available.\";\n movieInfoDirector.textContent = movie.directedBy || \"N\/A\";\n movieInfoWriter.textContent = movie.writtenBy || \"N\/A\";\n movieInfoProducer.textContent = movie.producedBy || \"N\/A\";\n movieInfoMusic.textContent = movie.musicBy || \"N\/A\";\n\n movieInfoCastList.innerHTML = '';\n if (movie.cast && movie.cast.length > 0) {\n movie.cast.forEach(actor => {\n const listItem = document.createElement('li');\n listItem.textContent = `${actor.name} \u2014 ${actor.character}`;\n movieInfoCastList.appendChild(listItem);\n });\n } else {\n movieInfoCastList.innerHTML = '<li>N\/A<\/li>';\n }\n\n if (movie.embedUrl && movie.embedUrl !== \"https:\/\/www.youtube.com\/embed\/placeholder?si=placeholder\") {\n let embedUrl = movie.embedUrl;\n let separator = embedUrl.includes('?') ? '&' : '?';\n if (playMode === 'autoplay-only') {\n \/\/ For autoplay on the info card, the video must be muted to comply with browser policies\n embedUrl += `${separator}autoplay=1&mute=1&rel=0`;\n } else if (playMode === 'fullscreen') {\n \/\/ For fullscreen, we can autoplay without muting\n embedUrl += `${separator}autoplay=1&rel=0`;\n } else {\n \/\/ Default to not autoplaying\n embedUrl += `${separator}rel=0`;\n }\n videoPreviewIframe.src = embedUrl;\n } else {\n videoPreviewIframe.src = \"about:blank\";\n }\n \n if (playMode === 'fullscreen') {\n \/\/ Hide the info card and close button for a true full-screen experience\n previewGroup.classList.add('in-fullscreen');\n } else {\n previewGroup.classList.remove('in-fullscreen');\n }\n\n modalOverlay.classList.add('visible');\n\n if (playMode === 'fullscreen') {\n try {\n if (modalOverlay.requestFullscreen) {\n modalOverlay.requestFullscreen();\n } else if (modalOverlay.mozRequestFullScreen) {\n modalOverlay.mozRequestFullScreen();\n } else if (modalOverlay.webkitRequestFullscreen) {\n modalOverlay.webkitRequestFullscreen();\n } else if (modalOverlay.msRequestFullscreen) {\n modalOverlay.msRequestFullscreen();\n }\n } catch (e) {\n console.error(\"Fullscreen request failed:\", e);\n }\n }\n }\n\n \/\/ Function to close the modal\n function closeModal() {\n modalOverlay.classList.remove('visible');\n videoPreviewIframe.src = \"\";\n \n previewGroup.classList.remove('in-fullscreen');\n\n if (document.fullscreenElement) {\n document.exitFullscreen();\n }\n }\n\n \/\/ Event listeners for the modal\n closeModalBtn.addEventListener('click', closeModal);\n modalOverlay.addEventListener('click', (e) => {\n if (e.target === modalOverlay) {\n closeModal();\n }\n });\n\n \/\/ Handle fullscreen change\n document.addEventListener('fullscreenchange', () => {\n if (!document.fullscreenElement) {\n closeModal();\n }\n });\n\n \/\/ Function to render the video carousel\n function renderCarousel() {\n const carouselContainer = document.getElementById('carousel-1');\n carouselContainer.innerHTML = '';\n movies.forEach(movie => {\n const movieCard = document.createElement('div');\n movieCard.setAttribute('data-movie-title', movie.title);\n movieCard.className = 'movie-card';\n movieCard.innerHTML = `\n <img decoding=\"async\" src=\"${movie.poster}\" alt=\"${movie.title} Poster\" class=\"movie-poster\">\n `;\n movieCard.addEventListener('click', (e) => {\n const clickedTitle = e.currentTarget.getAttribute('data-movie-title');\n const selectedMovie = movies.find(m => m.title === clickedTitle);\n if (selectedMovie) {\n setHeroMovie(selectedMovie);\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n });\n carouselContainer.appendChild(movieCard);\n });\n }\n\n \/\/ Mobile menu toggle functionality\n mobileMenuBtn.addEventListener('click', () => {\n mobileNavMenu.classList.add('open');\n });\n closeMobileMenuBtn.addEventListener('click', () => {\n mobileNavMenu.classList.remove('open');\n });\n mobileNavMenu.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n mobileNavMenu.classList.remove('open');\n });\n });\n\n\n \/\/ Initial load of the page\n setHeroMovie(movies[0]);\n renderCarousel();\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Alvin Soprano – Streaming HOME SERIES MOVIES × HOME SERIES MOVIES PLAY MORE INFO AVAILABLE FOR STREAM × Directed by: Written by: Produced by: Music by: Cast:<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":2,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/pages\/8\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/alvinsoprano.com\/stream\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}