Como abrir vídeos clicando em ícones/imagens + botão de play animado - TUTORIAL ELEMENTOR

Formação WebP: ciparoni.com/f...
Curso CSS para Elementor: ciparoni.com/c...
Me siga no Instagram: / ciparoni
No vídeo de hoje, vou te mostrar como abrir vídeos em lighbox (popup) ao clicar em ícones ou imagens.
Além disso, também faremos um ícone de play animado, com SVG e CSS, para utilizarmos como botão para o vídeo.

[@viniciusmontelo4260]

Código CSS usado no vídeo: selector svg { overflow: visible; } #circulo1{ animation: waves 2s linear 0s infinite; } #circulo2{ animation: waves 2s linear 1s infinite; } @keyframes waves { 0%{ transform: scale(1); transform-origin: center center; opacity: 0.2; } 70%{ opacity: 0; } 100%{ transform: scale(4); transform-origin: center center; opacity: 0; } }

[@GabrielSantos-fp4xc]

Tava precisando descobrir isso hoje, abro o youtube e vejo você com a solução, monstro!

[@Fabio-Rodrigues]

Eu sempre criei com Lottie, mas assim além de melhor, mais leve e sem precisar de elementor pro. Top demais Cipa 👏🏽👏🏽👏🏽

[@wellington.willis]

Teus vídeos são sensacionais 👏👏👏

[@matheusdantas_oficial]

Cipa, vc é o cara mano suas dicas estão me ajudando a trabalhar de casa!!! Sugestão de video para vc: Como criar um popup enviando dados para o e-mail. Iria me ajudar muito pois estou tendo alguns problemas no meu elementor.

[@lucasmaranhao9027]

Top demais Cipa! 👏

[@juliomiller1]

Cara, na moral, brabo!

[@gabrielfreilandes]

Excelente como sempre

[@anavliss519]

Que super a ideia de dar um zoom na parte onde coloca o CSS!!! Obrigada!!!

[@ViniciusLeonciodsgn]

Qualidade de conteúdo e de áudio visual 👏🏽👏🏽👏🏽

[@viniciusmontelo4260]

Top demais, tive que instalar um plugin só pra isso.... Já não instalo mais kk Vlw mestre!

[@dannieldiogo]

Sensacional, parabéns. Cipa, tu precisa criar um apelido pros seus alunos a exemplo do "Subido" do Sobral, hahaha.

[@alisson70252]

Tu é um prefeito

[@eduardodinizxx]

tava precisandooooo

[@henrique_sc3436]

que efeito genial

[@BrennoARTS]

Como eu consigo tirar o "player controls" do video que abre na tela?

[@erycosantana]

Othon, como posso usar esse botão de maneira que eu possa editar as configurações do player do youtube? tipo o presto player consegue retirar o logo do youtube além de outras configurações no player. Mas usando essa opção do lighbox eu não sei como fazer o vídeo ser aberto de forma a editar essas opções, tem algum codigo css que possa fazer isso?

[@givemeatip433]

Top!

[@rodrigoroncolato2873]

SHow de dica!!!

[@bernardofl1]

Como faço um efeito hover com isso? (Só quando passo o mouse por cima)

[@AndradeGui]

Valeuuu mann

[@cleuderchagas9113]

FALA GALERA SUAVE BLZ E SUCESSO

[@rafaelnunes8754]

Fala Cipa, blz? Usar Icones SVG no site não aumenta o carregamento do DOM tendo em vista que o SVG é uma imagem com códigos. Isso não aumenta os códigos do site?

[@othonciparoni]

Rapaz, impacta bem pouco. O peso do arquivo SVG é muito baixo, o impacto na performance seria maior se usasse imagens em outros formatos, como jpg, webp ou png. Pode usar sem medo.

[@rafaelnunes8754]

@@othonciparoni Vlew Cipa.

[@ribeiromichael]

Tem como abrir um video do KZbin em lightbox ao clicar na imagem de uma galeria do wordpress feito com elementor?