{"id":32,"date":"2025-07-18T02:28:02","date_gmt":"2025-07-18T02:28:02","guid":{"rendered":"https:\/\/www.sivl-music.com\/?page_id=32"},"modified":"2026-04-29T01:49:28","modified_gmt":"2026-04-29T01:49:28","slug":"landing-page","status":"publish","type":"page","link":"https:\/\/www.sivl-music.com\/","title":{"rendered":"Landing Page"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\n\n<div class=\"wp-youtube-container\">\n        <iframe id=\"wp-youtube-iframe\" \n                src=\"https:\/\/www.youtube.com\/embed\/YWz8tBUfyHI?autoplay=1&#038;mute=0&#038;loop=1&#038;playlist=YWz8tBUfyHI&#038;controls=0&#038;modestbranding=1&#038;playsinline=1&#038;rel=0\" \n                title=\"YouTube video player\" \n                frameborder=\"0\" \n                allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" \n                allowfullscreen>\n        <\/iframe>\n        <button class=\"wp-unmute-btn wp-hidden\" id=\"wpUnmuteBtn\">\ud83d\udd0a Audio Activado<\/button>\n        <div class=\"wp-play-overlay\" id=\"wpPlayOverlay\">\n            <div class=\"wp-play-button\">\u25b6<\/div>\n            <p>Toca para reproducir con audio<\/p>\n        <\/div>\n    <\/div>\n\n    <style>\n        .wp-youtube-container {\n            overflow: hidden;\n            width: 100%;\n            aspect-ratio: 16\/9;\n            position: relative;\n            background: #000;\n            max-width: 100%;\n        }\n        \n        .wp-youtube-container iframe {\n            width: 300%;\n            height: 100%;\n            margin-left: -100%;\n            border: none;\n        }\n        \n        .wp-unmute-btn {\n            position: absolute;\n            top: 15px;\n            right: 15px;\n            background: rgba(0,0,0,0.85);\n            color: white;\n            border: none;\n            padding: 12px 16px;\n            border-radius: 6px;\n            cursor: pointer;\n            z-index: 100;\n            font-size: 14px;\n            font-family: inherit;\n            transition: all 0.3s ease;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.4);\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n        }\n        \n        .wp-unmute-btn:hover {\n            background: rgba(0,0,0,0.95);\n            transform: translateY(-1px);\n        }\n        \n        .wp-unmute-btn:active {\n            transform: translateY(0) scale(0.95);\n        }\n        \n        .wp-play-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.75);\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            cursor: pointer;\n            z-index: 50;\n            transition: opacity 0.4s ease;\n        }\n        \n        .wp-play-overlay:active {\n            background: rgba(0,0,0,0.85);\n        }\n        \n        .wp-play-button {\n            font-size: 80px;\n            color: white;\n            margin-bottom: 15px;\n            text-shadow: 0 4px 8px rgba(0,0,0,0.8);\n            user-select: none;\n            transition: transform 0.2s ease;\n        }\n        \n        .wp-play-overlay:active .wp-play-button {\n            transform: scale(0.9);\n        }\n        \n        .wp-play-overlay p {\n            color: white;\n            font-size: 18px;\n            margin: 0;\n            text-align: center;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.8);\n            font-weight: 500;\n            user-select: none;\n        }\n        \n        .wp-hidden {\n            display: none !important;\n        }\n        \n        .wp-fade-out {\n            opacity: 0 !important;\n            pointer-events: none !important;\n        }\n        \n        \/* Responsive para m\u00f3viles *\/\n        @media (max-width: 768px) {\n            .wp-play-button {\n                font-size: 100px;\n            }\n            \n            .wp-play-overlay p {\n                font-size: 20px;\n                padding: 0 25px;\n                line-height: 1.4;\n            }\n            \n            .wp-unmute-btn {\n                padding: 14px 18px;\n                font-size: 16px;\n                top: 12px;\n                right: 12px;\n            }\n        }\n        \n        \/* Animaciones CSS puras para compatibilidad *\/\n        @keyframes wp-success {\n            0% { transform: scale(1); background: rgba(0,0,0,0.85); }\n            50% { transform: scale(1.05); background: rgba(0,128,0,0.9); }\n            100% { transform: scale(1); background: rgba(0,128,0,0.8); }\n        }\n        \n        .wp-success-animation {\n            animation: wp-success 0.5s ease;\n            background: rgba(0,128,0,0.8) !important;\n        }\n        \n        \/* Estados espec\u00edficos para WordPress *\/\n        .wp-youtube-container.wp-loading .wp-play-overlay {\n            background: rgba(30,30,30,0.9);\n        }\n        \n        .wp-youtube-container.wp-loading .wp-play-overlay::after {\n            content: 'Cargando...';\n            position: absolute;\n            bottom: 30%;\n            left: 50%;\n            transform: translateX(-50%);\n            color: white;\n            font-size: 16px;\n        }\n    <\/style>\n\n    <script>\n        \/\/ Usar IIFE para evitar conflictos con WordPress\n        (function() {\n            'use strict';\n            \n            var wpVideoStarted = false;\n            var wpAudioEnabled = true; \/\/ Audio activado por defecto\n            \n            function wpIsMobile() {\n                return window.innerWidth <= 768 || \n                       \/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini\/i.test(navigator.userAgent);\n            }\n            \n            function wpStartVideo() {\n                if (wpVideoStarted) return;\n                \n                var iframe = document.getElementById('wp-youtube-iframe');\n                var overlay = document.getElementById('wpPlayOverlay');\n                var container = iframe.closest('.wp-youtube-container');\n                \n                if (!iframe || !overlay) return;\n                \n                wpVideoStarted = true;\n                \n                \/\/ Mostrar estado de carga\n                container.classList.add('wp-loading');\n                \n                \/\/ Recargar iframe para activar autoplay despu\u00e9s de interacci\u00f3n\n                var currentSrc = iframe.src;\n                iframe.src = '';\n                \n                setTimeout(function() {\n                    iframe.src = currentSrc;\n                }, 100);\n                \n                \/\/ Ocultar overlay\n                setTimeout(function() {\n                    overlay.classList.add('wp-fade-out');\n                    container.classList.remove('wp-loading');\n                    \n                    setTimeout(function() {\n                        overlay.classList.add('wp-hidden');\n                    }, 400);\n                }, 1500);\n            }\n            \n            function wpEnableSound() {\n                \/\/ Funci\u00f3n ya no necesaria, pero mantenida por compatibilidad\n                return;\n            }\n            \n            \/\/ Inicializaci\u00f3n cuando el DOM est\u00e9 listo\n            function wpInit() {\n                var overlay = document.getElementById('wpPlayOverlay');\n                var btn = document.getElementById('wpUnmuteBtn');\n                \n                if (!overlay || !btn) {\n                    \/\/ Reintentar despu\u00e9s de un momento\n                    setTimeout(wpInit, 500);\n                    return;\n                }\n                \n                \/\/ Eventos de click\/touch para overlay\n                overlay.addEventListener('click', wpStartVideo);\n                overlay.addEventListener('touchend', function(e) {\n                    e.preventDefault();\n                    wpStartVideo();\n                });\n                \n                \/\/ Eventos para bot\u00f3n de audio\n                btn.addEventListener('click', wpEnableSound);\n                btn.addEventListener('touchend', function(e) {\n                    e.preventDefault();\n                    wpEnableSound();\n                });\n                \n                \/\/ Auto-iniciar en desktop despu\u00e9s de delay\n                if (!wpIsMobile()) {\n                    setTimeout(function() {\n                        if (!wpVideoStarted) {\n                            wpStartVideo();\n                        }\n                    }, 3000);\n                }\n            }\n            \n            \/\/ M\u00faltiples m\u00e9todos de inicializaci\u00f3n para WordPress\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', wpInit);\n            } else {\n                wpInit();\n            }\n            \n            \/\/ Fallback para WordPress\n            setTimeout(wpInit, 1000);\n            \n        })();\n    <\/script>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd0a Audio Activado \u25b6 Toca para reproducir con audio<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-landing.php","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":57,"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=\/wp\/v2\/pages\/32\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/www.sivl-music.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}