Как сделать воспроизведение видео на фоне блока?

Question

[ssawyer]

Есть задача сделать воспроизведение видео при наведении на блок.
Не как не придет в голову решение, может кто то помочь?

Исходное состояние блока:


При наведении (убирается черный фон и воспроизводится видео)

Comments

[Ankhena]

ок, гугл "javascript воспроизвести видео при клике на кнопку"
ок, гугл "событие наведения мышки"
ок, гугл "убрать класс у блока"

[Danny Arty]

Не как не придет в голову решение, может кто то помочь?

Как вариант:
1) Этому блоку задаешь position:relative; и помимо основного класса добавь еще один, например inactive.
2) Размещаешь блок с видео с абсолютным позиционированием.
3) Классу inactive добавляешь псевдоэлемент на всю ширину и высоту с черным фоном и z-index выше, чем у блока с видео, чтобы он его перекрывал.
4) Пишешь скрипт-слушатель события наведения на этот блок. Убираешь класс inactive и проигрываешь видео.

Техническая сторона вопроса в гугле, примеров море.

Answer 1

[Noder SS]

Пользуюсь этим способом