Vídeo e iframe em HTML que carregam rápido

Gerador de código para vídeo e iframe em HTML

Vídeo e iframe em HTML: autoplay, legendas, embeds responsivos | We.Inc

Como usar a tag video (autoplay, muted, playsinline, poster), adicionar legendas com track, criar um vídeo de fundo no hero, incorporar YouTube ou Vimeo de forma responsiva e com lazy loading, além de um gerador de código de incorporação.

Para os seus próprios arquivos, use o elemento video: <video src="clip.mp4" controls playsinline preload="metadata" poster="still.jpg">. O autoplay só funciona junto com muted. Para YouTube ou Vimeo, use um iframe com loading="lazy", um title e aspect-ratio: 16 / 9 para um tamanho responsivo. O gerador abaixo escreve qualquer um dos dois para você.

Atributos de vídeo que você vai usar

Atributo
Efeito

Mostra os controles de reprodução, volume e tela cheia do navegador

autoplay muted
Começa a tocar ao carregar; a maioria dos navegadores exige muted para isso

Toca dentro da página no iPhone em vez de abrir em tela cheia

Recomeça ao chegar ao fim

Imagem exibida antes de a reprodução começar

none, metadata ou auto: quanto baixar antecipadamente

Escolha uma fonte no gerador de código, ative as opções e copie um código que já inclui os atributos que as pessoas esquecem: playsinline para iPhones, um title no iframe para leitores de tela, o YouTube com privacidade aprimorada e uma caixa 16:9 que nunca fica achatada. As seções abaixo tratam de legendas, vídeos de fundo, sandbox e uma fachada de clicar para carregar que mantém players pesados fora da primeira renderização.

Escolha YouTube, Vimeo, um arquivo hospedado por você ou qualquer outra URL de iframe.
Cole o ID do vídeo ou o caminho do arquivo e escolha autoplay, loop, controles e o tempo de início.
Deixe as opções responsivo e lazy loading ligadas, a menos que tenha um motivo para não fazer isso.
Copie o código e cole na sua página ou no bloco de HTML do seu criador de sites.

Dê a cada iframe um atributo title que diga o que ele contém. Os leitores de tela o anunciam quando o usuário chega ao frame.
Use preload="none" em vídeos que ficam bem abaixo na página, ou preload="metadata" se quiser mostrar a duração sem baixar o clipe.
Recodifique os vídeos de fundo sem faixa de áudio. Um stream silencioso é menor e torna a exigência de muted irrelevante.
Um iframe com loading="lazy" que já está na primeira tela carrega na hora mesmo assim, então o atributo é seguro em quase todos os frames.
Sempre ofereça controles ou um botão de pausa visível para movimento que dure mais de cinco segundos, como pede a WCAG 2.2.2.

Perguntas frequentes

Por que o meu vídeo não toca automaticamente?

Os navegadores bloqueiam o autoplay com som. Adicione muted junto com autoplay, e playsinline para iPhones. Modos de economia de dados e algumas configurações do usuário ainda podem bloqueá-lo, então crie a página para funcionar só com a imagem de poster.

Como deixo um embed do YouTube responsivo?

Remova os estilos fixos de largura e altura e dê ao iframe width: 100%; height: auto; aspect-ratio: 16 / 9. A propriedade aspect-ratio mantém a altura acompanhando a largura em qualquer tamanho de tela, substituindo o antigo wrapper com padding-bottom: 56.25%.

O que o youtube-nocookie.com faz?

É o modo de privacidade aprimorada do YouTube. Segundo o YouTube, as informações de visualização não são usadas para personalizar a navegação do espectador até que ele dê play no vídeo. Fora isso, o embed funciona do mesmo jeito; basta trocar o domínio no src.

O que o atributo sandbox faz em um iframe?

Um atributo sandbox vazio aplica todas as restrições: sem scripts, sem formulários, sem popups, sem navegação da página principal e com uma origem única. Depois você libera só o que o frame precisa com tokens como allow-scripts ou allow-forms. Evite combinar allow-scripts com allow-same-origin para conteúdo não confiável.

Como adiciono legendas a um vídeo?

Escreva um arquivo WebVTT com as falas cronometradas e adicione <track kind="captions" src="captions.vtt" srclang="en" label="English" default> dentro do elemento video. O navegador adiciona um menu de legendas aos controles. O arquivo precisa ser servido da mesma origem ou com CORS.

Por que uma fachada é melhor que incorporar o player direto

Um iframe do YouTube ou do Vimeo carrega os próprios scripts, estilos e fontes assim que é renderizado, antes que alguém aperte o play. Em uma página com vários embeds, esse peso cai sobre todos os visitantes, e a maioria nunca assiste.
Uma fachada mostra a miniatura e um botão de play, e só troca pelo iframe real no clique. O Lighthouse lista esse padrão na sua auditoria de fachadas de terceiros. O código abaixo faz isso em poucas linhas, sem nenhuma biblioteca.

Vídeo de fundo no hero feito com responsabilidade

Mantenha o clipe curto, sem som e comprimido, defina um poster para que algo apareça de imediato e coloque o texto sobre uma sobreposição escura para que o contraste não dependa do quadro. Esconda o vídeo para quem pede movimento reduzido e deixe o poster sustentar o design.

O elemento video

Um clipe de produto com fontes e um poster

O navegador toca a primeira fonte que suporta, então liste primeiro o formato menor e mais novo. O parágrafo dentro dele só aparece em navegadores sem nenhum suporte a vídeo.

Legendas com track e WebVTT

Anexando arquivos de legenda

kind="captions" inclui efeitos sonoros e nomes de quem fala; kind="subtitles" é para tradução. default ativa a primeira.

O arquivo começa com WEBVTT, seguido de blocos com tempo de início e fim e depois o texto. Sirva-o com o content type text/vtt.

Vídeo de fundo no hero com alternativa

Hero sem som, em loop, com alternativa para movimento reduzido

O poster e o fundo do hero usam a mesma imagem, então o hero fica certo antes de o vídeo carregar e quando ele é escondido por causa do movimento reduzido.

Atributos de iframe que importam

Atributos de iframe e quando usá-los

Atributo
Exemplo
Finalidade

title="Store location map"
Nome acessível do frame

loading="lazy"
Adia frames fora da tela até o usuário rolar até perto deles

sandbox="allow-scripts allow-forms"
Restringe o que a página incorporada pode fazer

allow="autoplay; fullscreen; picture-in-picture"
Concede recursos do navegador ao frame

Permite que o player entre em tela cheia (equivalente antigo de allow="fullscreen")

referrerpolicy="strict-origin-when-cross-origin"
Limita o que o site incorporado descobre sobre a URL da página

width / height
width="560" height="315"
Reserva espaço antes do carregamento; sobrescreva com CSS

Embed responsivo do YouTube em 16:9

aspect-ratio mantém a proporção do frame em qualquer largura. O domínio nocookie é o modo de privacidade aprimorada do YouTube.

Um widget de terceiros em sandbox

Só scripts e envio de formulários são liberados. O frame não consegue abrir popups nem navegar a sua página.

Fachada do YouTube com clique para carregar

Primeiro a miniatura, o player no clique

Até alguém clicar, a página carrega uma única imagem de miniatura em vez do player completo. O botão mantém tudo acessível pelo teclado.

Formatos e orçamento de tamanho

Formatos de vídeo para a web (confira no caniuse as versões exatas que o seu público usa)

Contêiner e codec
Suporte
Use para

MP4, vídeo H.264, áudio AAC
Todos os principais navegadores atuais
O padrão seguro e a fonte alternativa

WebM, VP9
Todos os principais navegadores atuais
Arquivos menores com qualidade parecida; liste antes do MP4

MP4 ou WebM, AV1
Versões recentes dos principais navegadores; confira no caniuse
Os menores arquivos, mais lentos para codificar

GIF animado
Em todo lugar
Evite para qualquer coisa com mais de um ou dois segundos; um MP4 sem som é muito menor

Comprimindo um clipe de hero com ffmpeg

Nossas metas de trabalho: 720p ou 1080p, sem áudio, menos de dez segundos e no máximo alguns megabytes. -an remove o áudio, -movflags +faststart permite que a reprodução comece antes de o arquivo terminar de baixar.

Arquivo de vídeo

Outro iframe

Gerador de código de incorporação

Fonte

ID ou URL do vídeo

Caminho do arquivo de vídeo

URL do iframe

Título (lido pelos leitores de tela)

Imagem de poster (opcional)

Começar em (segundos)

Autoplay (sem som)

Loop

Controles

Não rastrear (dnt=1)

Privacidade aprimorada (nocookie)

Lazy loading

Responsivo 16:9

Sandbox

Movimento com autoplay e sem controles: adicione o seu próprio botão de pausa para que os visitantes possam pará-lo.

Código

Copiar código

Apresentação do produto

Comece grátis · Sem cartão de crédito