Nik Faraday

Тип hidden не подходит, потому что его можно редактировать? А что из html вы вообще можете НЕ редактировать?

Вам тут стоит понять одну очень важную штуку: html/css/js образуют client side. Вы должны понимать, почему это называется вообще "Клиентом"? Потому что эта вся информация полностью загружается на клиента и он имеет к ней доступ.

По этому существует server side - часть программной системы, к какой конечный пользователь не имеет доступа, в отличии от клиентской части.

Цель сервера - обрабатывать запросы с клиента. Первое, что делает сервер с данными, которые ему отправил клиент - ВАЛИДИРУЕТ. Соответственно, если данные не валидны - запрос разворачивается обратно на клиента и отдаёт ему какую-то ошибку

Это всё так, к слову. Вам важно понять, что клиент может редактироваться, вы никак не сможете этого избежать. Но этого не стоит бояться, т.к. то, за что вы переживаете должно обрабатываться на сервере.

Client side должен обрабатывать данные перед отправкой на сервер (Но сервер обязан их повторно валидовать) и после получения данных от сервера для наилучшего представления ИХ конечному пользователю

UPD: для справки. Вы можете полностью редактировать html в режиме реального времени, но он не будет сохранён для всех пользователей, а только для вас, т.к. эта часть загружается только два вас как для конечного пользователя. Сам html хранится на сервере и является результатом работы сервера. Эту часть html, что вы видите в браузере вы можете редактировать.

Вы можете динамически подключать стили или их удалять. Можете менять скрипты, удалять их из сайта (Тогда отправка вообще работать не будет и, соответсвенно, отключится весь функционал, за который отвечаел скрипт) или добавить новые скрипты. А можете вообще написать свой скрипт прямо в консоли браузера и он будет работать.

Проблема в том, что даже после элементарной перезагрузки страницы (Через Ctrl + R или другими способами) это всё будет утеряно и вам загрузится тот самый html/css/js, который является результатом рабыты сервера того сайта, который вы просматриваете

Ну... Вот структура ajax скрипта для post запроса (Только вам нужно сначала ещё подключить jQuery, потому что ajax является частью библиотеки jQuery):

let data = { prop: value }
let jsonData = JSON.stringify(data)

$.ajax({
     url: 'https://domain.com/route/to/endpoint/',
     method: 'post',
     data: jsonData,
     dataType: 'json',
     contentType: 'application/json; charset=utf-8',
     success: (response) = { console.log(response) }, // catch Ok
     error: (response) => { console.log(response) } // catch other (BadRequest, NotFound e.t.c)
})

Этот скрипт будет выполняться асинхронно и пользователю не придётся ждать его завершения, а когда запрос будет выполнен, вы сможете его обработать в блоках success и error

document.querySelectorAll('.menu-button') возвращает массив элементов, а не один элемент. В вашем случае нужно так:

let buttons = document.querySelectorAll('.menu-button')
buttons.forEach(btn => {
     btn.onclick = () => {...}
});

Или другой вариант для вас, вам нужно использовать не document.querySelectorAll('.menu-button'), а

document.querySelector('.menu-button').onclick = () => { ... }

Верстать лучше в VS Code, т.к. вы можете накинуть туда много плагинов, которые очень сильно вам могут помочь в этом

Для дизайна лучше используйте Figma

Попробуйте вот такую комбинацию с помощью JS:

<video id="myVideo" autoplay>
          <source src="your_video.mp4" type="video/mp4">
     </video>

document.getElementById('myVideo').play();

А для модалок вот так:

<a href="#" onclick="openModal()">Открыть видео</a>

<!-- Модальное окно -->
<div class="overlay" id="video1">
    <div class="modal">
        <div class="video__title">
        </div>
        <div class="video" id="youtube">
            <iframe width="640" height="360" id="player" src="https://www.youtube.com/embed/J32MrXDK6oI?version=3&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
        </div>
        <a href="#" onclick="closeModal()" class="close">Закрыть</a>
    </div>
</div>

<script type="text/javascript" src="http://www.youtube.com/player_api"></script>

var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function openModal() {
        document.getElementById('video1').style.display = 'block';
    }

    function closeModal() {
        document.getElementById('video1').style.display = 'none';
        player.stopVideo();
    }