Camuflar um vídeo em uma postagem no Blogger

Neste tutorial abrangente, você aprenderá a camuflar um vídeo em uma postagem no Blogger que só é revelado após um atraso de 10 segundos ou ao clicar em um botão de “Assistir”. Essa técnica proporciona uma experiência interativa e envolvente para seus leitores. Vamos explorar ambas as abordagens para que você possa escolher a que melhor se adapta ao seu estilo.

1: Preparação do Vídeo e Página

Escolha o Vídeo: Selecione um vídeo adequado para a postagem e obtenha o código de incorporação fornecido pela plataforma de vídeo (YouTube, Vimeo, etc.).

Crie uma Nova Postagem: Acesse o painel de controle do Blogger e crie uma nova postagem onde deseja adicionar o vídeo.

2: Camuflar o Vídeo com um Atraso de 10 Segundos

Abordagem 1: Exibição Após 10 Segundos

Edite o HTML: Dentro da postagem, clique na opção “Visualizar em HTML” para trabalhar diretamente com o código HTML da postagem.

Código HTML do Vídeo Camuflado: Cole o seguinte código HTML onde deseja que o vídeo seja exibido, mas inicialmente permaneça camuflado:

<div id="videoContainer" style="display: none; text-align: center;">
<iframe width="560" height="315" src="URL_DO_VIDEO_EMBED" frameborder="0" allowfullscreen></iframe>
</div>

Certifique-se de substituir “URL_DO_VIDEO_EMBED” pelo código de incorporação do vídeo.

Código JavaScript para Atraso: Logo abaixo do código do vídeo, insira o seguinte código JavaScript para criar um atraso de 10 segundos antes de exibir o vídeo:

<script>
setTimeout(function() {
var videoContainer = document.getElementById('videoContainer');
videoContainer.style.display = 'block';
}, 10000); // Atraso de 10 segundos
</script>

Às vezes, você pode querer ajustar a duração do atraso antes de o vídeo ser revelado. Felizmente, é fácil adaptar essa abordagem para atender às suas necessidades. O atraso de 10 segundos foi escolhido como um exemplo, mas você pode facilmente modificar esse valor. Se desejar um atraso maior ou menor, basta ajustar o valor numérico no código JavaScript. Ao modificar }, 10000); você pode personalizar o atraso de acordo com suas preferências.

3: Adicionar Botão de Assistir

Abordagem 2: Botão de Assistir

Edite o HTML: Abra a postagem no editor de HTML novamente.

Código HTML do Botão: Cole o seguinte código HTML onde deseja que o botão de “Assistir” seja exibido:

<div style="text-align: center;">
<button id="showVideoButton" style="background-color: #007bff; border-radius: 5px; border: none; color: white; cursor: pointer; display: none; padding: 10px 20px; transition: background-color 0.3s ease 0s;">Assistir</button>
</div> 

Código JavaScript para Exibição: Logo abaixo do código do botão, insira o seguinte código JavaScript para exibir o vídeo quando o botão for clicado:

<script>
setTimeout(function() {
        var showVideoButton = document.getElementById('showVideoButton');
        var videoContainer = document.getElementById('videoContainer');

        showVideoButton.style.display = 'block';
        showVideoButton.addEventListener('click', function() {
            showVideoButton.style.display = 'none';
            videoContainer.style.display = 'block';
            videoContainer.scrollIntoView({ behavior: 'smooth' });
        });
    }, 10000); // Atraso de 10 segundos
</script>

4: Adicionar Aviso para Rolar até o Final

Código HTML do Aviso: Após o código do vídeo ou do botão, adicione o seguinte código HTML para incentivar os leitores a rolar até o final da postagem:

<div style="text-align: center; margin: 30px auto;">
<p>Role até o final para assistir ao vídeo.</p>
</div>

5: Publicar e Testar

Publique a Postagem: Após concluir todas as etapas, publique a postagem no Blogger.

Visualize e Teste: Abra a postagem para verificar se ambas as abordagens estão funcionando conforme o esperado. O vídeo deve ser revelado após 10 segundos ou ao clicar no botão de “Assistir”, e o aviso deve incentivar os leitores a rolar até o final.

Conclusão:

Neste tutorial, você aprendeu duas maneiras de criar uma postagem no Blogger com um vídeo camuflado. Com a primeira abordagem, o vídeo é revelado automaticamente após 10 segundos. Com a segunda, um botão de “Assistir” desencadeia a exibição do vídeo. Ambas as opções são ideais para criar uma experiência interativa e envolvente para seus leitores. Lembre-se de personalizar os estilos e testar em diferentes dispositivos para garantir uma experiência consistente. Use essas técnicas para adicionar um toque de interatividade às suas postagens e proporcionar uma experiência memorável aos seus leitores.