Como incorporar vídeos do Youtube no seu site

Todos os nossos cursos em promoção

Fazer a incorporação dos iframes do Youtube no seu site é uma tarefa bem rápida e simples.

Publicado em

Incorporar vídeos do Youtube no HTML da sua página é uma tarefa bem simples. Se você utiliza o Wordpress, por exemplo, será necessário a combinação com um Plugin, algo que não vamos ver nesse artigo.

Vale lembrar que a inclusão do emebed do Youtube, faz com que suas notas nas Core Web Vitals sejam afetadas, isso devido ao péssimo sistema de incorporação que o Youtube nos oferece.

Vamos usar o seguinte vídeo como exemplo https://youtu.be/O6rQ0aqCTeE. Siga o passo a passo abaixo.

  • Acesse a página do vídeo;
  • Clique no botão Compartilhar, ao lado do botão de curtir;
  • Depois em Incorporar;
  • Copie o código de incorporação que vai surgir.

Código de incorporação de vídeo do Youtube.
Código de incorporação de vídeo do Youtube.

Por fim, basta colocar o código no local que deseja fazer a incorporação, como nosso exemplo abaixo.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>

<body>

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

</body>

</html>

 

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Todos os nossos cursos em promoção
Todos os nossos cursos em promoção

Webstories

Todos os nossos cursos em promoção


Deixe um comentário
Aguarde...
Todos os nossos cursos em promoção