Como Inserir Vídeos do YouTube com Autoplay e Loop Usando o Elemento Embed na Rockty

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 e height 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!