Inserindo vídeos do YouTube em uma página HTML

Amigos, nesse artigo vou mostrar como inserir um vídeo do YouTube dentro de uma página HTML. Não se assustem, a coisa é muito simples.

Publicado em: 7 de novembro de 2007  |  Leituras: 22.462  |  Canal: HTML  |  Autor: Jonathan Lamim Antunes
Primeiro você vai criar a sua página HTML, de acordo com o seu gosto. Se quiser pode copiar e colar o código abaixo:

<html>
<head>
<title>Inserindo vídeos do YouTube em uma página HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Meu vídeo preferido</p>
</body>
</html>

Em seguida, salve a página como index.htm

Após ter criado a página, acesse o site do YouTube (www.youtube.com) e encontre o vídeo que deseja colocar na página.
Quando vc clicar no vídeo para fazer a visualização logo abaixo aparecerá um campo com o seguinte nome: EMBED. Esse campo é muito importante para colocar o vídeo na nossa página, é dentro dele que está o código que deverá ser copiado para a página.

Selecione todo o código que está dentro do campo EMBED e copie-o para a página HTML.
O Código ficará assim:

<html>
<head>
<title>Inserindo vídeos do YouTube em uma página HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

<p>Meu vídeo preferido</p>

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/k9_iQim8Mtw&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/k9_iQim8Mtw&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

</body>
</html>


Pronto, o vídeo já está na sua página e os internautas poderão visualizá-lo por lá, sem precisar abrir o YouTube.
Mas, espera aí... o vídeo tá grande demais na página? Não tem problema, a gente diminui, basta você alterar os 2 parâmetros "width" e apagar o parâmetro heightque se encontram no enderço copiado do youtube, para que o tamano do vídeo seja proporcional.

Veja no exemplo abaixo, o código da página com o mesmo vídeo em 2 tamanhos diferentes.

<html>
<head>
<title>Inserindo vídeos do YouTube em uma página HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body><center>

<p>Meu vídeo preferido</p>

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/k9_iQim8Mtw&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/k9_iQim8Mtw&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

<p>Meu vídeo preferido em tamanho reduzido</p>

<object width="300" ><param name="movie" value="http://www.youtube.com/v/k9_iQim8Mtw&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/k9_iQim8Mtw&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="300"></embed></object>


</center></body>
</html>


É isso aí pessoal, viram como é fácil colocar os vídeos do YouTube no seu site?!

Até a próxima...

Resposta em até 24 horas! (grátis)Dúvidas?

Compartilhe
Share orkut
delicious
Gostei

Nossa url encurtada:
Dicas do canal