я делаю видио навелу в  переменой Json  у меня есть акты, время паузы в это время генерируються кнопки до этого их не видно есть видио для тега видио
когда я выбираю кнопку я перехажу в следущий акт где может быть другое видио и кнопки, количество кнопок денамическое в json акте для главы я указываю кнопки какие и где будут
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game</title>
    <style>
        body {
            padding: unset;
            margin: unset;
            position: relative;
        }

        #choices {
            position: absolute;
            display: grid;
            grid-template-columns: repeat(3, 200px);
            grid-template-rows: repeat(3, 50px);
            left: calc(50% - 350px);
            bottom: 100px;
            gap: 50px;
        }

        .choice-button {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }


        .choice-button button {
            box-sizing: border-box;
            border: none;
            width: 284px;
            padding: 15px;
            font-size: 36px;
            border-radius: 10px;
            box-sizing: border-box;
            color: #fff;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
            font-size: 24px;
            font-weight: 700;
            text-align: left;
            cursor: none;
            transition: all 700ms;
        }

        .choice-button_center button {
            text-align: center;
            border-radius: 50px;
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
        }

        #cell-2 {
            transform: translateY(-50px);
        }

        #cell-8 {
            transform: translateY(50px);
        }

        #cell-4 {
            transform: translateX(-50px);
        }


        #cell-6 {
            transform: translateX(50px);
        }

        #cell-1 button,
        #cell-4 button,
        #cell-7 button {
            background: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
            text-align: right;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }


        #cell-1 button:hover,
        #cell-4 button:hover,
        #cell-7 button:hover {
            background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, rgba(102, 102, 102, 0) 95.77%);
        }

        #cell-3 button,
        #cell-6 button,
        #cell-9 button {
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(102, 102, 102, 0) 100%);
            text-align: left;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
        }

        #cell-3 button:hover,
        #cell-6 button:hover,
        #cell-9 button:hover {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(102, 102, 102, 0) 95.77%);
        }


        #cell-2 button:hover,
        #cell-8 button:hover {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 95.77%);

        }

        .choice-button:nth-child(5) {
            background: unset;
            text-align: unset;
            border-top-right-radius: unset;
            border-bottom-right-radius: unset;
        }


        .choice-button_hidden {
            visibility: hidden;
        }

        .choice-button_controls {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: unset;
        }

        .choice-button_circle {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: none;
            background: rgba(0, 0, 0, 0.5);
            transition: all 700ms;
        }

        .choice-button_circle::before {
            content: "";
            position: absolute;
            top: -60px;
            width: 90px;
            height: 90px;
            background: url("./arrow.svg");
            background-repeat: no-repeat;
            background-position: center;
            transform: translateX(5%);
        }

        .choice-button_circle::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.3s ease;
            content: "";
            width: 60px;
            height: 60px;
            border: 10px solid rgba(255, 255, 255, 0.251);
            border-radius: 50%;
            background: transparent;
            box-shadow: 0px 0px 18px 0px rgba(255, 255, 255, 0.25);
        }

        .choice-button_circle:hover {
            transform: rotate(90deg);
        }
    </style>
</head>

<body>
    <video src="./1.mp4" autoplay muted loop>
        Браузер не поддерживает воспроизведение video
    </video>
    <div id="choices">
        <div id="cell-1" class="choice-button_hidden choice-button"></div>
        <div id="cell-2" class="choice-button_hidden choice-button choice-button_center"></div>
        <div id="cell-3" class="choice-button_hidden choice-button"></div>
        <div id="cell-4" class="choice-button_hidden choice-button"></div>
        <div id="cell-5" class="choice-button choice-button_controls">
            <div class="choice-button_circle">

            </div>
        </div>
        <div id="cell-6" class="choice-button_hidden choice-button"></div>
        <div id="cell-7" class="choice-button_hidden choice-button"></div>
        <div id="cell-8" class="choice-button_hidden choice-button choice-button_center"></div>
        <div id="cell-9" class="choice-button_hidden choice-button"></div>
    </div>

    <script>
        const choices = document.querySelector('#choices');
        const cellIds = ["cell-1", "cell-2", "cell-3", "cell-4", "cell-5", "cell-6", "cell-7", "cell-8", "cell-9"];

        function generateButtons() {
            const buttons = [
                { id: "cell-1", label: "Button 1" },
                { id: "cell-3", label: "Button 3" },
                { id: "cell-4", label: "Button 4" },
                { id: "cell-6", label: "Button 6" },
                { id: "cell-7", label: "Button 7" },
                { id: "cell-9", label: "Button 9" },
            ];

            buttons.forEach(button => {
                const cell = document.getElementById(button.id);
                if (cell) {
                    const btn = document.createElement("button");
                    btn.textContent = button.label;

                    cell.appendChild(btn);
                    cell.classList.remove('choice-button_hidden');
                }
            });
        }

        // Генерируем кнопки при загрузке страницы
        generateButtons();
    </script>
</body>

</html>