Usando VTurb com Wix

Nesse artigo, vamos aprender a usar VTurb com Wix em um passo a passo super detalhado.

Segue:

Ao fazer o login na Vturb, você verá um painel com todos seus vídeos. Você deve apertar em </> e copiar o código JS:







Aparecerá essa caixinha na página:

Ao clicar em copiar o código, esse pop-up aparecerá no topo da sua página.






Na sua página, em edição, clique no + que fica no canto superior esquerdo da sua página:

Ao clicar no + (adicionar), automaticamente é aberta uma seção onde haverá várias opções de elementos.






Você deve procurar o elemento Incorporar:

É o elemento que vamos apertar para abrir uma nova seção.






Procure o Elemento Incorpore um widget:

Você vai dar apenas 1 clique nele. Assim que der 1 clique, abrirá uma caixinha na sua página. Essa caixinha pode ser redimensionada apenas clicando e segurando na extremidade dela e puxando para o tamanho que você quer que o vídeo fique.

Caso você use algum botão integrado com Vturb, você deve deixar a caixa bem alta para o botão aparecer dentro da caixa também.









Clique na engrenagem (Configurações):

Você vai dar apenas 1 clique nela e abrirá uma caixinha na sua página.





Abrirá uma segunda seção de configuração, onde você vai colar o embed do seu vídeo:

Na primeira parte da caixa de configurações, você deixa marcada a opção “Código”.
Onde tem “adicione seu código aqui” é o lugar que você deve adicionar esse código completo abaixo:

<allow script><style>.smartplayer-video-wrap{height: initial!important;}
    #smartplayer#smartplayer#smartplayer .smartplayer-video-wrap .smartplayer-video{height: initial!important;}
    .smartplayer-call-action { text-align: center!important; padding: 40px 0!important; }
    @media (max-width: 448px){ .smartplayer-call-action a.smartplayer-call-action--link{ 
    font-size: 16px!important; width: 100%!important;padding: 15px 0px!important; }}
    @media (max-width: 337px){ .smartplayer-call-action a.smartplayer-call-action--link{ font-size: 14px!important }} </style>

Após colar o código, você vai colar o embed do seu vídeo depois do código, na mesma caixa.

Depois que você colou o código, o proximo passo é colar o embed do seu vídeo e apertar em “Atualizar”. A sequência deve ficar dessa forma mostrada abaixo.

Código do passo número 7
    
    Seu embed JS

→ Lembrando do espaço da caixinha para o botão:

Caso você use algum botão integrado do Vturb, deverá deixar um espaço além do vídeo na caixinha, como no print abaixo.




Prontinho! Seu vídeo já estará rodando normalmente na sua página. 🙂

Não esqueça de adicionar seu(s) domínio(s) na aba de Segurança, garantindo proteção extra aos seus VSLs.

Saiba mais sobre o assunto em:

Saiba como usar o VTurb com os principais construtores de página!

Diferença entre o Iframe e o código JS

Atualizado em: 18/10/2023