Друзья, знаю что решения этой задачи практически нет, но вдруг! Кто то из вас знает что то, его еще нет в сети. Я перерыл весь инет, в поисках решения данного вопроса.
Есть блок с HTML5 видео, блок сделан фоном. Получается видео фон на странице. Поверх есть блок с blur эффектом размытия. Есть один метод в css backdrop-filter: blur(); но он экспериментальный и почти нигде совсем не поддерживается.
Для фото фона, есть разные решения, с помощью SVG маски и дублирование рисунка в блок но размытого предварительно в фотошопе.
Но вот для видео, нет ничего. Кроме одного решения, но оно не подходит мне, в нем тупо в блок который должен быть размыт, дублируется еще раз видео, которое установлено фоном, и этот блок просто размывается обычным filter: blur();, и вроде ладно дублирование видео, тяжесть для страницы, проблема главная в том, что нужно синхронизировать оба видео, фоновое и в блоке, а это очень непросто. Особенно в моем случае, когда блок с блуром, это на 100% прижатый к низу блок высотой в 300px. В нем просто видео невозможно синхронизировать с фоновым, которое 100 X 100%.
Вот то что нужно мне, блок снизу с блуром, видео фоном.
Вот этот вариант единственное решение похоже, но я его не могу применить, из за расположения и размера моего блока, нельзя свести оба видео.
И вот вопрос, может знаете какое решение? Буду оч признателен если подскажете, может JS какой есть для этого. Или с SVG танцы какие. Подскажите пожалуйста.
