Blur borda videos do Youtube

Faz um tempo que eu percebi essa atualização do YT e desde lá fiquei com a duvida de como esse efeito é feito. Segue alguns prints para exemplificar o efeito:

https://imgur.com/a/JoEMXRZ https://imgur.com/Ghenl6P

É interessante pq ele consegue gerrar esse "Blur" com varias cores diferentes e ele muda dinamicamente de acordo com as cores presentes no video. Fiquei curioso para saber como conseguem pegar a cor sendo que é um video. Gostaria muito de entender como esse efeito é feito no navegador web usando provavelmente só JS e CSS. Ja Inspecionei os elementos mas não consegui entender muito bem o efeito.

mikeg há 2 anos

Chico, não tenho certeza se é exatamente dessa maneira que o youtube está fazendo, mas no CSS temos uma propriedade chamada filter

filter: blur(10px);

Da maneira que está acima você consegue fazer esse efeito de blur em qualquer elemento HTML, ai a quantidade de pixel que você colocar vai definir o quão "embaçado" vai ficar.

Segue exemplo de código que encontrei no codepen: https://codepen.io/code-boxx/pen/YzEvNeR

Espero ter ajudado e bons estudos 😁

coffeeispower há 2 anos

nao e bem assim, tem um certo delay do que tem no vídeo e o que aparece no ambiente mode, o blur e meio acumulativo

mikeg há 2 anos

Se quiser fazer o blur acumulativo pode usar a propriedade de "animation" do CSS para sair do blur 0 até o valor que você desejar assim vai ter uma transição mais fluida. Se não é isso que queria foi malz kkk é porque esse efeito de blur não acontece que meu youtube aqui pra testar.

KaioPiola há 2 anos

Esse efeito é um grande mistério para mim também! Sempre fiquei reparando nesse detalhe de que o blur dele parece ser um pouco atrasado e acumulativo, mudando dinamicamente para se adaptar ao vídeo, mas não parece ser o vídeo em si rodando atrás dele. Estou acompanhando este post para tentar descobrir também!