CanalQb - Youtube - AutoPlay - Engajamento com blog ou site
Galera, imagine seu leitor ou telespectador rodar seu vídeo por duas vezes. Então vamos ao segredo, é simples.
Imagine que o usuário chegue ao seu vídeo. Se você não conseguir prendê-lo por 30 segundos, o que normalmente acontece, ele irá simplesmente clicar no link, fechar o vídeo, e você não engajou.
Vamos resolver isso.
No segundo link da descrição do vídeo, mantenha o link de referência às informações do vídeo, mantido em uma postagem que você criou.
Quando o usuário clicar nele, em vez de já iniciar a atividade, ele irá cair na matéria de leitura do vídeo. Então faça o seguinte, pelo menos eu entendo assim.
Inicie seu post com um título <h1> e uma imagem com alt.
Informe o link da atividade, já abaixo dela, e faça o usuário clicar, abrir uma nova aba usando o target=blank no link. Decida se quer esse link rastreado ou não usando o rel="nofollow".
Após, insira o texto ou o passo a passo da atividade, se possível com imagens.
Por fim, insira o vídeo em um <iframe>.
Nota: Saiba que carregar o vídeo em uma <div> incorpora o vídeo diretamente no HTML, causando um tempo maior de carregamento. Já o <iframe>, carrega o elemento de forma independente, carregando primeiro todos os scripts da página, para depois chamar o vídeo através de um link externo.
Se você manter a configuração padrão do seu Blogger, Wordpress ou mesmo template de criação de loja, simplesmente o vídeo será chamado, mas será estático, não gerando visualização.
A diferença nesta dica é que meu script resolve o problema de forma simples. Ele inicia o YouTube, de forma com que, ao usuário abrir a página e carregar todos os processos internos dela, o vídeo via iframe irá autoexecutar. Isso fará com que possivelmente ele mantenha a aba da postagem carregada, e executando/rodando o vídeo sem que ele se pause, criando assim uma melhor resposta no Analytics do YouTube e entrega de vídeo para novos usuários.
<iframe allow="autoplay; encrypted-media" allowfullscreen="" class="BLOG_video_class" height="315" src="https://www.youtube.com/embed/ABCDEFGHIJKLM?autoplay=1&mute=1&origin=https://canalqb.blogspot.com/" width="100%" youtube-src-id="ABCDEFGHIJKLM"></iframe>
Explicando cada item
allow="autoplay; encrypted-media": Este atributo permite definir quais recursos são permitidos no iframe. No caso, "autoplay" permite que o vídeo seja reproduzido automaticamente e "encrypted-media" permite que o conteúdo seja reproduzido de um site protegido por HTTPS.
allowfullscreen="": Este atributo permite que o vídeo seja exibido em tela cheia quando o usuário ativar essa opção.
class="BLOG_video_class": Esta é uma classe atribuída ao iframe para aplicar estilos ou manipulá-lo com CSS e JavaScript.
height="315": Este atributo define a altura do iframe em pixels. No caso, é definido como 315 pixels.
src="https://www.youtube.com/embed/ABCDEFGHIJKLM?autoplay=1&mute=1&origin=https://canalqb.blogspot.com/": Este é o atributo src que define a fonte do conteúdo do iframe. No exemplo fornecido, o iframe está incorporando um vídeo do YouTube. O link https://www.youtube.com/embed/ABCDEFGHIJKLM é o link de incorporação do vídeo no YouTube. Os parâmetros autoplay=1 e mute=1 garantem que o vídeo seja reproduzido automaticamente e em mudo. O parâmetro origin especifica a origem do carregamento do iframe.
autoplay=1: Este parâmetro indica que o vídeo será reproduzido automaticamente assim que o player do YouTube for carregado na página. O valor "1" significa verdadeiro, ou seja, a reprodução automática está habilitada. Se o valor fosse "0", a reprodução automática estaria desativada.mute=1: Este parâmetro indica que o vídeo será reproduzido em modo mudo, ou seja, sem som. O valor "1" significa que o vídeo será reproduzido sem áudio. Isso é comum em páginas da web onde os vídeos são reproduzidos automaticamente, mas o som é desativado para não incomodar os usuários imediatamente.origin=https://canalqb.blogspot.com/": Este parâmetro indica a origem do carregamento do iframe, ou seja, de onde a solicitação para carregar o vídeo está vindo. No exemplo fornecido, o valor indica que a origem é o site "canalqb.blogspot.com". Isso é usado como uma medida de segurança para garantir que o conteúdo do iframe seja carregado apenas de origens confiáveis, ajudando a prevenir ataques de cliquejacking.Nota: O caractere & é uma entidade HTML que representa o caractere "&". No contexto de uma URL, ele separa os diferentes parâmetros para que o navegador possa interpretá-los corretamente.
width="100%": Este atributo define a largura do iframe em porcentagem da largura da janela do navegador. No exemplo, é definido como 100%, o que significa que o iframe ocupará toda a largura disponível.
youtube-src-id="ABCDEFGHIJKLM": Este é um atributo personalizado que armazena o ID do vídeo do YouTube. Isso pode ser útil para identificar o vídeo em operações de script ou manipulação de elementos.
Eu não inclui no link o direcionamento da minha playlist, apesar de ser um ponto valido importante sobre o proximo video do canal, para a minha ideia de apresentação de postagens não é util. não removi, mas no link que mative em vermelho, você pode adaptar para
https://www.youtube.com/embed/ABCDEFGHIJKLM?list=PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP&autoplay=1&mute=1&origin=https://canalqb.blogspot.com/
"&list=PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP" é um parâmetro que você pode adicionar à URL de um vídeo do YouTube para indicar que esse vídeo está incluído em uma playlist específica.
"list": Este é o nome do parâmetro que informa ao YouTube que você está fornecendo o ID da playlist à qual o vídeo pertence.
"PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP": Este é o ID único da playlist no YouTube. Cada playlist possui um ID exclusivo que identifica essa lista específica de vídeos. Quando você adiciona este parâmetro à URL do vídeo, está indicando ao YouTube que o vídeo está associado a essa playlist específica.
Essencialmente, ao incluir "&list=PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP" na URL do vídeo, você está informando ao YouTube que esse vídeo faz parte da playlist identificada pelo ID "PL_bWKnK7ufEAzouYibMW-Uvo6BDR0HzOP".
0 Comentários