🎬 Gerador de Embed de Vídeo Responsivo
Cole o link do YouTube para gerar um código que se ajusta automaticamente a qualquer tela.
Código HTML para o seu Blog:
Copie e cole este bloco no seu post (modo HTML):
Insira a URL do YouTube e clique em Gerar.
Pré-Visualização Responsiva:
O vídeo aparecerá aqui para você testar.
🛠️ Modo de Usar o Gerador de Embed
- Encontre o Link: Vá até o YouTube (ou outro serviço de vídeo compatível) e copie a **URL completa** do vídeo que você deseja incorporar.
- Cole no Campo: Insira a URL copiada no campo de texto da ferramenta.
- Gere o Código: Clique no botão **GERAR CÓDIGO EMBED RESPONSIVO**.
- Copie o HTML: Um bloco de código HTML será gerado. Copie o conteúdo completo deste bloco.
- Cole no Post: Edite seu artigo de blog no modo **HTML (Código Fonte)** e cole o código na posição desejada. O vídeo aparecerá perfeitamente ajustado em qualquer dispositivo!
❓ Perguntas Frequentes (FAQ)
Por que devo usar um código embed responsivo?
Vídeos incorporados de forma tradicional geralmente quebram o layout em smartphones, pois suas dimensões são fixas. O código responsivo garante que o vídeo se redimensione automaticamente para preencher a largura total do dispositivo, mantendo a proporção de 16:9 sem criar barras de rolagem horizontais, melhorando a experiência do usuário e o SEO (otimização para mobile).
O código gerado funciona apenas com o YouTube?
A ferramenta é otimizada para links do YouTube, que utiliza um formato de URL específico para extração do ID. No entanto, a estrutura HTML/CSS gerada (a classe .video-responsive-container) pode ser adaptada para outros serviços (Vimeo, por exemplo), bastando alterar a URL do iframe manualmente, mantendo o ID do vídeo correto.
Preciso de classes CSS extras no meu blog?
Sim. Para que o código funcione corretamente, você deve ter a classe .video-responsive-container definida no CSS do seu blog. Esta classe é que garante a proporção 16:9 e o comportamento responsivo.
