Como deixar vídeo Responsivo no site ou blog
Criar um site que seja responsivo é essencial para garantir
a melhor experiência para os usuários e, ao mesmo tempo, impulsionar o seu SEO.
E todas as imagens e vídeos do site também devem ser adaptáveis ao diversos formatos de telas.
Neste artigo você vai aprender de forma simples como deixar vídeo responsivos no seu site ou blog.
Algumas plataformas como YouTube já libera um código de incorporação pronto, mas nem sempre ele se adapta as telas de vários dispositivos.
Usaremos como base a visão da tela de computador para escolher o tamanho base do nosso vídeo.
Para os vídeos no meu site/blog eu uso Largura (widget) 700px e Altura (height) 396px.
E o vídeo que usarei e um que já está no meu canal do YouTube.
Código base do meu vídeo no YouTube:
Agora eu escrevi um novo código já responsivo baseado nas minhas medidas e link e vou deixar aqui escrito para vocês copiarem e alterarem, apenas as medidas e o link de direcionamento.
Neste código você ira trocar onde está
700 pela largura
396 pela largura
em pixel do video (quando aparecer no computador)
e onde está
src="LINK-DO-SEU-VÍDEO"
substitua LINK-DO-SEU-VÍDEO
pela URL/LINK do video que você quer que apareça no seu site/blog
Agora você terá os vídeos do seu site/blog responsivo, para celular, computador...
Quer adicionar mais funcionalidade aos seus site e blogs de maneira rápida e fácil?
Clique no banner abaixo e conheça a ferramenta que uso e recomendo
Hello :)
ResponderExcluirYou should avoid old HTML tags like "center" (use text-align: center; instead).
iframe[src*="youtube"] {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
That's it, no extra HTML tags or inline CSS. Saves time when you already have dozens or hundreds of videos in posts.
BTW: be careful with scripts that remove the date and .html from the URL. This may look nicer, but those URLs will be recognized as 404s because the page doesn't actually exist.