Display your Riddle as an overlay modal

Example Page

Complete code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riddle Component</title>
    <style>
        .riddle-id-input {
            display: flex;
            gap: 1rem;
            align-items: center;
            margin-bottom: 1rem;
        }

        .riddle-id-input input {
            padding: 0.5rem;
            font-size: 1rem;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
            padding: 1rem;
        }

        .riddle-id-input button {
            padding: 0.5rem 1rem;
            font-size: 1rem;
            background: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 0.25rem;
            cursor: pointer;
        }

        .riddle-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .riddle-modal button {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
        }
    </style>
</head>

<body>
    <div>
        <div class="riddle-id-input">
            <input id="riddleIdInput" type="text" placeholder="Riddle ID" value="dWdvwLjt">
            <button onclick="loadRiddle()">Load Riddle</button>
        </div>

        <div id="riddleModal" class="riddle-modal" style="display: none;">
            <button onclick="hideRiddle()">Close</button>

            <div class="riddle2-wrapper" data-rid-id="" data-auto-scroll="false" data-is-fixed-height-enabled="false"
                data-bg="#fff" data-fg="#00205b" style="margin:0 auto; max-width:100%; width:640px;">

                <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>

                <iframe src="" allow="autoplay" referrerpolicy="strict-origin"></iframe>
            </div>
        </div>
    </div>

    <script>
        function loadRiddle() {
            const riddleIdInput = document.getElementById("riddleIdInput").value;
            const riddleModal = document.getElementById("riddleModal");

            riddleModal.style.display = "flex";

            const riddleEmbed = document.querySelector(".riddle2-wrapper");
            riddleEmbed.setAttribute("data-rid-id", riddleIdInput);

            // Set iframe source.
            const iframe = riddleEmbed.querySelector("iframe");
            iframe.src = `https://www.riddle.com/embed/a/${riddleIdInput}?lazyImages=false&staticHeight=false`;
        }

        function hideRiddle() {
            var riddleModal = document.getElementById("riddleModal");
            riddleModal.style.display = "none";

            const riddleEmbed = document.querySelector(".riddle2-wrapper");
            riddleEmbed.setAttribute("data-rid-id", "");

            // Set iframe source.
            const iframe = riddleEmbed.querySelector("iframe");
            iframe.src = "";
        }
    </script>
</body>

</html>