Olá! nesse artigo curto tenho que te mostrar a estrutura de CSS/HTML que vai tornar todos os vídeos do YouTube no seu template do Blogger responsivos, e tudo que você vai precisar fazer (antes de tudo um backup do seu templete) é colocar o código de CSS a seguir no seu template, direito no editor de HTML do Blogger na tag b:skin ou na opção de personalização do seu template na guia tema do Blogger. Após isso ter sido feito da forma correta você já pode colocar o iframe do seu vídeo do YouTube dentro da tag div com class de nome video-resposivo, isso vai fazer o seu vídeo se ajustar automaticamente em qualquer dispositivo.
<div class="video-responsivo">
<iframe width="560" height="315" src="https://www.youtube.com/embed/GeFgiNGXUAk?si=XAMkzjV2R--P3yZC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>.video-responsivo{
position: relative;
padding-bottom: 56.25%; /* 16:9, padrão dos vídeos */
height: 0;
overflow: hidden;
margin-bottom:20px;}
.video-responsivo iframe, .video-responsivo object, .video-responsivo embed, .video-responsivo video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Caso precisem de outro tutorial, falem nos comentários que eu vou ler todos com muito carinho.
A importância fundamental de um site responsivo
Num mundo cada vez mais conectado, onde a Internet é acessível através de diversos dispositivos, como smartphones, tablets e computadores, ter um site responsivo tornou-se essencial para qualquer negócio ou organização. Um site responsivo se adapta automaticamente ao tamanho da tela do dispositivo utilizado pelo usuário, garantindo uma experiência de navegação agradável e eficiente, independente da forma de acesso.
Vantagens de um site responsivo:
- Uma melhor experiência do usuário: O principal benefício de um site responsivo é a qualidade da experiência que ele proporciona. Adaptando-se a diferentes telas, o site facilita a navegação, a leitura do conteúdo e a interação com os elementos da página, aumentando assim a satisfação do usuário e reduzindo as chances de abandono do site.
- SEO e Posicionamento em Mecanismos de Busca: Sites responsivos são melhor avaliados pelos buscadores, como o Google, o que contribui para um melhor posicionamento nas páginas de resultados de buscadores (SERPs). Isso significa que seu site terá maior probabilidade de ser encontrado por usuários que procuram produtos, serviços ou informações relacionadas ao seu negócio.
- Maior conversão: um site com uma boa experiência do usuário tem maior probabilidade de converter visitantes em clientes. Isto deve-se à facilidade de navegação e otimização para diferentes dispositivos, o que favorece ações como compras, subscrições de newsletters ou pedidos de contacto.
- Acessibilidade: A capacidade de resposta garante que o site seja acessível a um público mais amplo, incluindo pessoas com deficiência ou que utilizam dispositivos com telas menores. Isso mostra o compromisso da empresa com a inclusão e acessibilidade digital.
- Custo-Benefício: Criar um site responsivo é um investimento que rende um retorno significativo a longo prazo. Ao proporcionar uma boa experiência para todos os usuários, você aumenta as chances de fidelizá-los e gerar mais oportunidades de negócios.
Resultado
Conclusões:
Num mundo cada vez mais digital, ter um site responsivo não é apenas uma opção, mas sim uma necessidade. É uma forma de garantir que o seu negócio esteja presente em diferentes plataformas e possa atingir um público mais amplo, proporcionando uma experiência de navegação agradável e eficiente. Ao investir em um site responsivo, você estará investindo no sucesso do seu negócio.E aí, o que acharam do nosso código? Bacana né? Espero que teenha gostado e aprendido a fazer e tchau.
