Как сделать слой с прозрачной «дыркой» внутри?

Question

[Vadim Bogomazov]

Доброго времени суток!

Подскажите плиз, как реализовать такой слой с "замочной скважиной", через которое видно фоновое видео? prntscr.com/9qbu7b
Насколько я понимаю, нужно использовать svg, можете скинуть пример такой реализации или примерный алгоритм решения задачи?

Спасибо!

Answer 1

[Anna_BS]

codepen.io/fixcl/pen/CHgrn
codepen.io/SahAssar/pen/YPWxWX

Answer 2

[Денис Инешин]

1. Открываем фотошоп
2. Создаем квадратную/прямоугольную белую картинку (размером с видео)
3. Вырезаем в ней дырку в центре нужной формы
4. Сохраняем как пнг с прозрачностью
5. В HTML вставляем div слоем выше видео.
6. Фоном для этого дива используем эту картинку
7. Profit!