Video And Photo Player

function processImage(originalImg, mediaUrl = "", autoplay = 0, loop = 0, muted = 0, backgroundColor = "#000000", objectFitMode = "contain") {
    // Create the main container for the player
    const container = document.createElement("div");
    container.style.width = "100%";
    container.style.height = "100%";
    container.style.minHeight = "400px";
    container.style.display = "flex";
    container.style.backgroundColor = backgroundColor;
    container.style.alignItems = "center";
    container.style.justifyContent = "center";
    container.style.position = "relative";
    container.style.overflow = "hidden";
    container.style.borderRadius = "8px";
    
    let targetSrc = originalImg.src;
    let isVideo = false;
    
    // Determine if we should display a video or a photo
    if (mediaUrl.trim() !== "") {
        // If a media URL is provided, default to treating it as a video
        targetSrc = mediaUrl.trim();
        isVideo = true;
    } else {
        // Fallback: check if the original image's source has a video extension
        const cleanUrl = targetSrc.split('?')[0].toLowerCase();
        const extension = cleanUrl.substring(cleanUrl.lastIndexOf('.') + 1);
        if (['mp4', 'webm', 'ogg', 'mov', 'm4v'].includes(extension)) {
            isVideo = true;
        }
    }

    if (isVideo) {
        const video = document.createElement("video");
        video.src = targetSrc;
        video.controls = true;
        
        // Coerce loose inputs to boolean logic suitable for the video element
        video.autoplay = (autoplay == 1 || String(autoplay).toLowerCase() === "true");
        video.loop = (loop == 1 || String(loop).toLowerCase() === "true");
        video.muted = (muted == 1 || String(muted).toLowerCase() === "true");
        
        // Use the originally provided image as a poster thumbnail if testing a distinct video URL
        if (mediaUrl.trim() !== "") {
            video.poster = originalImg.src;
        }
        
        video.style.width = "100%";
        video.style.height = "100%";
        video.style.maxWidth = "100%";
        video.style.maxHeight = "100%";
        video.style.objectFit = objectFitMode;
        video.style.outline = "none";
        
        container.appendChild(video);
    } else {
        // Act as a photo player
        const img = document.createElement("img");
        img.src = targetSrc;
        
        img.style.width = "100%";
        img.style.height = "100%";
        img.style.maxWidth = "100%";
        img.style.maxHeight = "100%";
        img.style.objectFit = objectFitMode;
        img.style.display = "block";
        
        container.appendChild(img);
    }

    return container;
}