Paty Freitas: Como deixar vídeo Responsivo no site ou blog

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:

<iframe width="560" height="315" src="https://www.youtube.com/embed/gkK896a4RLA" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; 
clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen></iframe>

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.

<center>
<div style="position: relative; padding-bottom: 57%; height: 0; overflow: hidden; max-width: 700px; margin: 0 auto;">
  <iframe 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    width="700"
    height="396"
    src="LINK-DO-SEU-VÍDEO"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</div>
</center>

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

.

Como deixar vídeo Responsivo no site ou blog

Nenhum comentário:

Postar um comentário