YouTube URL Image Player

/**
 * Creates an interactive image that, when clicked, transforms into an embedded YouTube player.
 * @param {Image} originalImg - A JavaScript Image object that is fully loaded. This image will be used as the thumbnail.
 * @param {string} youtubeUrl - The URL of the YouTube video to be played. Default is an empty string.
 * @returns {HTMLElement} A div element containing the image thumbnail which turns into a video player on click.
 */
function processImage(originalImg, youtubeUrl = '') {

    /**
     * Extracts the YouTube video ID from a variety of URL formats.
     * @param {string} url - The YouTube URL.
     * @returns {string|null} The 11-character video ID or null if not found.
     */
    const getYouTubeId = (url) => {
        if (!url || typeof url !== 'string') {
            return null;
        }
        // This regex covers youtube.com/watch, youtu.be/, youtube.com/embed/, etc.
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        const match = url.match(regExp);
        return (match && match[2].length === 11) ? match[2] : null;
    };

    const videoId = getYouTubeId(youtubeUrl);

    // Create the main container element
    const container = document.createElement('div');
    container.style.position = 'relative';
    // Use the natural dimensions of the loaded image to set the container size
    container.style.width = `${originalImg.naturalWidth}px`;
    container.style.height = `${originalImg.naturalHeight}px`;
    container.style.display = 'inline-block';
    container.style.overflow = 'hidden';
    container.style.backgroundColor = '#000';

    // Clone the original image to use as a thumbnail
    const thumbnail = originalImg.cloneNode();
    thumbnail.style.width = '100%';
    thumbnail.style.height = '100%';
    thumbnail.style.display = 'block';
    thumbnail.style.objectFit = 'cover';
    container.appendChild(thumbnail);

    // If no valid YouTube video ID is found, just return the container with the static image.
    if (!videoId) {
        return container;
    }

    // Since there's a valid video, make the container clickable
    container.style.cursor = 'pointer';

    // Create the play button overlay
    const playButtonWrapper = document.createElement('div');
    playButtonWrapper.style.position = 'absolute';
    playButtonWrapper.style.top = '0';
    playButtonWrapper.style.left = '0';
    playButtonWrapper.style.width = '100%';
    playButtonWrapper.style.height = '100%';
    playButtonWrapper.style.display = 'flex';
    playButtonWrapper.style.alignItems = 'center';
    playButtonWrapper.style.justifyContent = 'center';
    playButtonWrapper.style.transition = 'background-color 0.1s cubic-bezier(0,0,0.2,1)';
    // This makes sure clicks pass through the overlay to the container
    playButtonWrapper.style.pointerEvents = 'none';

    // Use a standard YouTube play icon SVG
    const playIconSvg = `
        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%" style="width: 68px; height: 48px;">
            <path class="ytp-large-play-button-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00" fill-opacity="0.8">
            </path>
            <path d="M 45,24 27,14 27,34" fill="#fff"></path>
        </svg>
    `;
    playButtonWrapper.innerHTML = playIconSvg;
    container.appendChild(playButtonWrapper);
    
    // Add a subtle hover effect
    container.addEventListener('mouseenter', () => {
        playButtonWrapper.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
    });
    container.addEventListener('mouseleave', () => {
        playButtonWrapper.style.backgroundColor = 'transparent';
    });


    // Create the iframe for the YouTube player, initially hidden
    const iframe = document.createElement('iframe');
    // Parameters: autoplay, disable related videos, etc.
    iframe.setAttribute('src', `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`);
    iframe.setAttribute('frameborder', '0');
    iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
    iframe.setAttribute('allowfullscreen', 'true');
    iframe.style.position = 'absolute';
    iframe.style.top = '0';
    iframe.style.left = '0';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.display = 'none'; // Keep it hidden until click
    container.appendChild(iframe);

    // Add a one-time click event listener to start the video
    container.addEventListener('click', function playVideo() {
        // Hide the thumbnail and play button
        thumbnail.style.display = 'none';
        playButtonWrapper.style.display = 'none';
        // Show the iframe, which will autoplay
        iframe.style.display = 'block';
    }, {
        once: true
    }); // The {once: true} option removes the event listener after it's called

    // Return the fully constructed container element
    return container;
}