roi-theme/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js

/**
 * YouTube Facade - Lazy Load Handler
 *
 * PageSpeed Optimization Phase 2.4:
 * - Loads YouTube iframe only on user click
 * - Reduces TBT by ~2000ms
 *
 * @package ROITheme
 * @since 1.0.6
 */

(function() {
    'use strict';

    /**
     * Initialize facade click handlers
     */
    function initYoutubeFacades() {
        var facades = document.querySelectorAll('.youtube-facade[data-video-id]');

        facades.forEach(function(facade) {
            facade.addEventListener('click', handleFacadeClick);
        });
    }

    /**
     * Handle click on facade - load real iframe
     * @param {Event} event Click event
     */
    function handleFacadeClick(event) {
        event.preventDefault();

        var facade = event.currentTarget;
        var videoId = facade.getAttribute('data-video-id');

        if (!videoId) {
            return;
        }

        // Show loading state
        facade.classList.add('youtube-facade--loading');

        // Create iframe
        var iframe = document.createElement('iframe');
        iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0');
        iframe.setAttribute('title', 'YouTube video');
        iframe.setAttribute('frameborder', '0');
        iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
        iframe.setAttribute('allowfullscreen', '');

        // Wait for iframe to load before showing
        iframe.addEventListener('load', function() {
            facade.classList.remove('youtube-facade--loading');
        });

        // Clear facade content and add iframe
        facade.innerHTML = '';
        facade.appendChild(iframe);

        // Remove click handler (one-time activation)
        facade.removeEventListener('click', handleFacadeClick);
        facade.style.cursor = 'default';
    }

    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initYoutubeFacades);
    } else {
        initYoutubeFacades();
    }
})();