JSFiddle - React, Tailwind, and code Playground

JavaScript

// Extract JSFiddle reference
function extractJsFiddleRef(input) {
    if (!input)
        return null;
    const str = String(input).trim();

    // Full URL
    try {
        const url = new URL(str);
        if (url.hostname === 'jsfiddle.net' || url.hostname.endsWith('.jsfiddle.net')) {
            const parts = url.pathname.split('/').filter(Boolean);
            if (!parts.length)
                return null;

            const embeddedIndex = parts.indexOf('embedded'),
                trimmed = embeddedIndex === -1 ? parts : parts.slice(0, embeddedIndex);
            if (!trimmed.length)
                return null;

            if (trimmed.length === 1)
                return { user: null, id: trimmed[0], revision: null };

            const user = trimmed[0],
                id = trimmed[1],
                revision = trimmed.length > 2 && /^\d+$/.test(trimmed[2]) ? trimmed[2] : null;

            return { user, id, revision };
        }
    } catch {
        // Ignore URL parse errors; we still support shorthand formats below.
    }

    // user/id shorthand, with optional revision
    let match = str.match(/^([a-zA-Z0-9-_]+)\/([a-zA-Z0-9]+)(?:\/(\d+))?$/);
    if (match)
        return { user: match[1], id: match[2], revision: match[3] || null };

    // id shorthand
    if (/^[a-zA-Z0-9]+$/.test(str))
        return { user: null, id: str, revision: null };

    return null;
}

// Generate JSFiddle embed
function generateJsFiddleEmbed(input) {
    const ref = extractJsFiddleRef(input);
    if (!ref)
        return '';

    let embedUrl = ref.user
        ? `https://jsfiddle.net/${ref.user}/${ref.id}`
        : `https://jsfiddle.net/${ref.id}`;
    if (ref.revision)
        embedUrl += `/${ref.revision}`;
    embedUrl += '/embedded/';

    return [
        '<div class="video-embed-container" style="padding-top: 62.5%;">',
        '  <iframe',
        '    style="position: absolute; top: 0;...