Иван

Теория.
Получаете ответ от обработчика форм / бека - считываете ответ. Если успех -> вызываете функцию открытия формы с успехом, если ошибка -> форма с ошибкой (по id или data attr нужной формы).
А еще это форма то может быть одна, просто вы в форму можете вставлять свои сообщения.
Если форму пишите с нуля, то вам нужно сделать html разметку, css стили.
Функция вызова формы - можно просто добавлять нужные классы для открытия формы.

А если используете какой-то css фреймворк, допустим bootstrap, то там есть функции вызова формы и вообще сама форма готовая.

Далее простой пример

<!-- Модальное окно успешного результата -->
<div id="modal-success" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Успех!</h2>
    <p>Данные успешно отправлены.</p>
  </div>
</div>

<!-- Модальное окно с ошибкой -->
<div id="modal-error" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Ошибка!</h2>
    <p>Произошла ошибка при отправке данных.</p>
  </div>
</div>

// При успешной отправке данных
const showSuccessModal = () => {
    document.getElementById("modal-success").style.display = "block";
};

// При ошибке отправки данных
const showErrorModal = () => {
    document.getElementById("modal-error").style.display = "block";
};

// Закрытие модального окна при клике на крестик
const closeButtons = document.getElementsByClassName("close");
for (let i = 0; i < closeButtons.length; i++) {
    closeButtons[i].addEventListener("click", function() {
        const modal = this.parentElement.parentElement;
        modal.style.display = "none";
    });
}

//пример обработки ответа с формы

const form = document.querySelector('form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const formData = new FormData(form);
  const response = await fetch('/api/submit-form', {
    method: 'POST',
    body: formData
  });

  if (response.ok) {
    const result = await response.json();
    // обработка успешного ответа
    console.log(result);
  } else {
    const error = await response.text();
    // обработка ошибки
    console.error(error);
  }
});

// а это пример с promise .then 
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault(); // Предотвращаем отправку формы по умолчанию
  
  // Получаем данные из формы
const formData = new FormData(form);
  
  // Отправляем данные на сервер с помощью Fetch API
  fetch("URL_СЕРВЕРА", {
    method: "POST",
    body: formData
  })
  .then(function(response) {
    if (response.ok) {
      showSuccessModal(); // Показываем модальное окно успешного результата
    } else {
      showErrorModal(); // Показываем модальное окно с ошибкой
    }
  })
  .catch(function(error) {
    console.error("Ошибка:", error);
    showErrorModal(); // Показываем модальное окно с ошибкой
  });
});

.modal {
  display: none; /* Скрываем модальное окно по умолчанию */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

Как-то так?
Когда запускаем одно аудио, мы отключаем остальные, кроме текущего

<audio id="audio1" src="music.mp3"></audio>
<audio id="audio2" src="music2.mp3"></audio>

const audioElements = Array.from(document.getElementsByTagName('audio'));

  const stopOtherAudio = (currentAudio) => {
    audioElements.forEach((audio) => {
      if (audio !== currentAudio) {
        audio.pause();
        audio.currentTime = 0;
      }
    });
  };

  audioElements.forEach((audio) => {
    audio.addEventListener('play', () => stopOtherAudio(audio));
  });

Не пробовал с видео, но с картинками точно работает .

Допустим так

clip-path: polygon(53% 0, 100% 0, 100% 49%, 100% 100%, 53% 100%, 52% 49%, 0 49%, 0 0);

потыкать тут

Ух.. Код немного избыточен.
Как я понял, у вас есть кнопка, которая открывает меню. Необходимо по клику открывать меню, блокировать скролл документа, плюс чтобы темнел фон. А при клике вне объекта меню - закрывалось меню, исчезал фон, скролл появлялся.

1. Как заблокировать скролл? Вешать на body - overflow: hidden при клике на кнопку.
2. Закрытие при клике вне меню. (загуглил, автор https://misha.agency/javascript/klik-vne-elementa.html)

jQuery(function($){
	$(document).mouseup( function(e){ // событие клика по веб-документу
		var div = $( "#popup" ); // тут указываем ID элемента
		if ( !div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0 ) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});
});

1. Посмотрите порядок подключения стилей.
2. Движки/CMS могут по-своему переключать порядок
3. Посмотрите в инспекторе , где идет сбивка стилей. Что перебивает.