Как сделать клик в любом месте страницы для удаления класса элемента?

Question

[Сергей]

Есть на странице видеоролик с маской на нем. По клику я эту маску убираю, добавлением класса без маски.

1) Как мне теперь кликом в любом месте страницы вернуть эту маску назад (удалить класс)?
2) Как запустить ролик при клике на маску, одновременно скрывая ее?

Просьба помочь кодом.

https://codepen.io/anon/pen/mvKbWW - полноценная картина всего

const sumupVideo = document.querySelector('.sumup__video-wrap');

if (sumupVideo !== null) {
  sumupVideo.onclick = function() {
    this.classList.add('sumup__video-wrap--active') //удаляем маску
  }

Comments

[FeST1VaL]

Как минимум нужен пример в песочнице... тк не понятно что у вас за котовася происходит...

[Сергей]

Артем Будин, добавил)

[FeST1VaL]

Сергей, Если правильно понял то так? https://codepen.io/anon/pen/qgKNpP

P.S
Ну там еще стили бы поправить чтобы блок не был таким здоровым с видео по ширине)
Лучше бы по умолчанию у вас была бы маска, а вот по клику на маску удалялся класс маски, а по клику куда то добавлялся... Просто как то логичнее было бы... ну хз...

[Сергей]

Артем Будин, Да, спасибо большое!
Я только подправил на body

if (sumupVideo !== null) {
  sumupVideo.onclick = function() {
    this.classList.add('sumup__video-wrap--active')
  }

  document.body.onclick = function (e) {
    if(e.target != sumupVideo) {
      sumupVideo.classList.remove('sumup__video-wrap--active')
    }
  }
}