Introdução#
Adicionar vídeos às suas páginas pode tornar seu conteúdo mais dinâmico e envolvente. Na Rockty, é fácil inserir vídeos do YouTube utilizando o elemento Embed. Neste tutorial, vamos orientá-lo a adicionar vídeos com o recurso de autoplay e também como configurar o vídeo para autoplay em loop. O embed já está otimizado para ser responsivo em telas menores, garantindo que seus vídeos tenham boa aparência em qualquer dispositivo.
1. Como Adicionar um Elemento Embed#
Para adicionar um elemento Embed à sua página, siga estas etapas:
-
Adicione um novo elemento na sua página.
-
Selecione o elemento 'Embed' na lista de opções disponíveis no menu lateral esquerdo.
💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.
2. Inserindo o Código do Vídeo#
Após adicionar o elemento Embed, siga os passos abaixo:
-
Clique na área do elemento Embed recém-adicionado para abrir a janela de inserção de código.
-
Cole o código embed fornecido abaixo, substituindo
SEU_VIDEO_ID
pelo ID do vídeo que você deseja exibir conforme indicado no passo a passo a seguir:
3. Incorporando Vídeo do YouTube com Autoplay#
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/SEU_VIDEO_ID?autoplay=1&mute=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>
Passo a passo:#
- Substitua
SEU_VIDEO_ID
pelo ID do vídeo que deseja exibir. O ID do vídeo é a parte final de um link do YouTube. Por exemplo, em uma URL como:
https://www.youtube.com/watch?v=AUd6G1G2eEk
📌 O ID do vídeo é AUd6G1G2eEk
-
O parâmetro
autoplay=1
faz com que o vídeo inicie automaticamente. -
O parâmetro
mute=1
é obrigatório para que o autoplay funcione corretamente na maioria dos navegadores.
4. Incorporando Vídeo do Youtube com Autoplay e Loop#
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;"> <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/SEU_VIDEO_ID?autoplay=1&mute=1&loop=1&playlist=SEU_VIDEO_ID" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div>
Passo a passo:#
- Substitua
SEU_VIDEO_ID
pelo ID do vídeo. Por exemplo, em uma URL como:
https://www.youtube.com/watch?v=AUd6G1G2eEk
📌 O ID do vídeo é AUd6G1G2eEk
-
O parâmetro
autoplay=1
faz com que o vídeo inicie automaticamente. -
O parâmetro
mute=1
é obrigatório para que o autoplay funcione corretamente na maioria dos navegadores. -
O parâmetro
playlist=SEU_VIDEO_ID
é necessário para que o loop funcione corretamente no YouTube.
5. Salvar e Publicar#
Após inserir o código:
-
Clique no ícone em formato de "X" para fechar a janela de inserção de código.
-
Não se esqueça de salvar a página. Quando estiver pronto, publique a página para que o vídeo fique visível aos visitantes.
6. Remover o Vídeo#
Caso precise remover o vídeo:
-
Clique no ícone de lixeira no elemento Embed para excluí-lo.
Dicas Adicionais#
-
O vídeo roda apenas na página publicada, portanto, teste a funcionalidade após a publicação.
-
O vídeo inicia mudo para que o recurso de autoplay funcione corretamente. Isso é obrigatório na maioria dos navegadores.
-
Evite o uso excessivo de elementos Embed na página, pois isso pode afetar o desempenho e a velocidade de carregamento da página.
-
Teste o comportamento do vídeo em diferentes dispositivos para garantir que ele se ajusta corretamente em todas as telas.
-
Você pode ajustar as dimensões da janela do vídeo alterando os valores de
width
eheight
no código embed.
Conclusão#
Inserir vídeos do YouTube com autoplay e loop na Rockty é simples com o uso do elemento Embed. O código já está otimizado para dispositivos móveis, garantindo uma boa experiência em qualquer tela. Lembre-se de seguir as melhores práticas para não comprometer a usabilidade da sua página.
Precisa de Ajuda?#
Se tiver dúvidas ou precisar de suporte adicional, entre em contato com nossa equipe de Suporte!