0

Como incluir um video do YouTube em sua pagina HTML? [Tutorial]]

#Programação para Internet #HTML #Boas práticas
Vagner Bellacosa
Vagner Bellacosa

Aprenda a criar uma pagina HTML com um video do Youtube incorporado nela.


Semelhante as video-aulas aqui na Digital Innovation One.


Uma função poderosa que abre inúmeras possibilidades a sua pagina Web, com pouco mais de 10 linhas de código, pode dar colocar qualquer video em seu blog.


IFRAME


Copie o código abaixo em um arquivo chamado Index.html e veja seu funcionamento.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="Vagner Bellacosa">
 <meta name="Keywords" content="Exemplo codigo html com pagina Youtube embutida">
 <meta name="Description" content="Treinamento avançado em Html e chamada a site externo incluindo video youtube">
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>HTML Video Tag Example</title>
</head>
<body>
<br>
<iframe width="100%" height="443" class="yvideo" id="pgHr6luyjjs"
       src="http://www.youtube.com/embed/pgHr6luyjjs?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"			    
       frameborder="0" allowfullscreen>
<p>Seu navegador não possui Suporte para este recurso...</p> 
</iframe>
</body>
</html>


Explicando o código:


Um iframe é um elemento do HTML utilizado para incorporar outra página da web na página atual. Ou seja, com ele você pode incluir conteúdos de outras páginas na sua própria página.


Nos parâmetros informei os detalhes da pagina


width= o percentual da largura

height= a altura

class= o tipo de pagina

id= coloquei o nome do video

src= coloquei a url do video no Youtube

rel= comandos do player youtube, tais como barras de avanço

frameborder= se possui borda

e por fim permiti que ficasse em tela cheia.


Em respeito aos navegadores antigos, deixei uma mensagem de alerta avisando que o IFrame nao é suportado por este navegador.


<iframe width="100%" height="443" class="yvideo" id="pgHr6luyjjs"
       src="http://www.youtube.com/embed/pgHr6luyjjs?rel=0&controls=0&hd=1&showinfo=0&enablejsapi=1"			    
       frameborder="0" allowfullscreen>
<p>Seu navegador não possui Suporte para este recurso...</p> 
</iframe>


Lembrando que podemos incorporar videos locais, audios, outras paginas web e por ai a fora. Um tag muito util que veio enriquecer ainda mais a navegabilidade e criação de front-ends.


Espero ter ajudado, qualquer duvida deixa no comentário, ou chama no Discord.


 https://www.linkedin.com/in/vagnerbellacosa/


 https://github.com/VagnerBellacosa/


Pode me dar uma ajudinha no YouTube?


 https://www.youtube.com/user/vagnerbellacosa

0
13

Comentários (0)

Analista Programador dinossauro IBM Mainframe

Brasil