Programação » HTML

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:
Autor da matéria
Jonathan Lamim Antunes

Graduando em Sistemas de Informação pela UNISA/SP, e programador web da Fivecom - Soluções em web 2.0, uma empresa do grupo Rede Gazeta, afiliada da Rede Globo.
Jonathan Lamim Antunes
site | twitter
Últimas matérias escritas pelo autor:
Últimas matérias
O que você procura para sua vida profissional?O que você procura para sua vida profissional?O planejamento agrega valorO planejamento agrega valorE-mail marketing em 140 caracteresE-mail marketing em 140 caracteres
Últimas notícias
Novos iPods, novo iOS, novo iTunes e nova Apple TVNovos iPods, novo iOS, novo iTunes e nova Apple TVConheça as 100 primeiras cidades atendidas pelo Banda Larga NacionalConheça as 100 primeiras cidades atendidas pelo Banda Larga ...Linus Torvalds diz que mercado já se rendeu ao LinuxLinus Torvalds diz que mercado já se rendeu ao Linux
Dicas do canal