Os Shorts do YouTube podem ser incorporados aos seus artigos usando um iframe HTML. Embora o YouTube atualmente não ofereça uma opção de incorporação direta para Shorts, você pode exibi-los modificando a URL do vídeo, substituindo /shorts/ por /embed/, e inserindo-o em um iframe. Isso te dá controle total sobre as dimensões, bordas e estilo do vídeo incorporado.
Quando usar essa técnica
- Incorporar conteúdo de vídeo de formato curto: exiba guias de produtos, dicas rápidas ou anúncios criados como YouTube Shorts diretamente nos seus artigos.
- Complementando os passos escritos com vídeo: incorpore um vídeo do Shorts junto com um procedimento para dar aos leitores um guião visual sem sair da página.
O YouTube atualmente não oferece uma opção nativa de embed para Shorts. Essa solução funciona substituindo shorts por embed dentro da URL do vídeo. Se o YouTube adicionar incorporação oficial de Shorts no futuro, esse método deve ser usado em vez disso.
Como incorporar um curta no YouTube
-
Vá ao YouTube e abra o vídeo Shorts que você quer incorporar.
-
Copie a URL do vídeo usando um dos seguintes métodos:
- Copie a URL da barra de endereços do seu navegador.
- Clique em Compartilhar > Cópia.
-
Cole a URL copiada no
srccampo do código iframe acima. -
No URL, substitua
/shorts/por/embed/.Por exemplo:
Before: https://www.youtube.com/shorts/pVRefGmQDJM After: https://www.youtube.com/embed/pVRefGmQDJM
- Cole o código iframe completo no seu artigo usando a visualização de código ou bloco HTML.
Referência rápida
Substitua <Shorts_video_code> pelo ID do seu vídeo (o código alfanumérico no final da URL do Shorts).
<iframe width="315" height="560"
src="https://www.youtube.com/embed/<Shorts_video_code>"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
| Campo | Padrão | Notas |
|---|---|---|
width |
315 |
Ajuste conforme necessário, mantendo a proporção de aspecto |
height |
560 |
Altura ótima para formato retrato de shorts |
src |
Sua URL do vídeo | Substitua /shorts/ por /embed/ na URL |
frameborder |
0 |
Definir pixels, 0 remove a borda |
Exemplo
Código:
<iframe width="315" height="560"
src="https://www.youtube.com/embed/pVRefGmQDJM"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
Saída:
Escopo e cobertura
| Item | Detalhes |
|---|---|
| Tamanho recomendado | 315px × 560px (retrato, corresponde à proporção 9:16 do Shorts) |
| Tamanhos personalizados | Suportado, ajuste largura e altura, mas mantenha a proporção 9:16 |
| Suporte ao editor | Qualquer editor que suporte tags iframe HTML |
| Opção nativa de incorporação | Atualmente não disponível para o YouTube Shorts |
Melhores práticas
- Sempre mantenha a proporção 9:16: Curtas são filmados em formato retrato. Se você redimensionar o quadro, mantenha a relação largura-altura em 9:16 (por exemplo, 270×480 ou 360×640) para evitar que o vídeo pareça esticado ou cortado.
- Use
frameborder="0": definir a borda em zero dá um visual mais limpo. Se quiser uma borda visível, use CSS em um wrapper<div>em vez doframeborderatributo, que está obsoleto no HTML5. - Definir
allowfullscreen: esse atributo permite aos leitores expandir o vídeo para tela cheia, o que melhora a experiência de visualização de conteúdos com texto ou detalhes pequenos na tela. - Teste a incorporação antes de publicar: após inserir o iframe, pré-visualize o artigo para confirmar que o vídeo carrega corretamente. Se o vídeo mostrar um erro, verifique novamente que ele
/shorts/foi totalmente substituído na/embed/URL. - Mantenha os títulos dos vídeos descritivos: o
titleatributo no iframe é lido pelos leitores de tela. Substitua"YouTube video player"por um título descritivo, como"Product setup walkthrough"para melhorar a acessibilidade.