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

Canal: HTML  |  Autor: Jonathan Lamim Antunes  |  Publicado em: 07/11/2007  |  Views: 15.530
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...
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:
NR. DE VOTO(S): [2]

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Celio
Publicado em:
01/11/2008 - 21:23
Celio
obrigado eu vo trabalha niso porque eu iceri video no youtube e esto asim eu poderia mostra meu tralho em meu saite que eu vo cria espero que eu concigo abraço
Caio
Publicado em:
24/11/2008 - 01:20
Caio
super legal essa dica me ajudou mto.
um abraço.
Lucas
Publicado em:
23/12/2008 - 14:54
Lucas
cara me quebro o galho esse teu script
Stefan
Publicado em:
17/03/2009 - 15:45
Stefan
Ae vlw tava mo curiozo pra faze issu
vlw mesmo flw
Fabiano
Publicado em:
30/05/2009 - 21:21
Fabiano
Valeu pela dica.

Vou poder trabalhar em um projeto agora.

Abração
Lucas
Publicado em:
23/06/2009 - 14:11
Lucas
VALEU MESMO CARA , mto bom thx ^^
Luciana Fraga
Publicado em:
13/08/2009 - 23:05
Luciana Fraga
Jonathan;
Tudo bem com tigo...

Em primeiro lugar eu quero agradecer pela explicação mostrada aqui neste site.
Sou verde ainda no assunto.
Gostaria muito de aprender a fazer um site, só que para mim aprender, tem que ser conforme o modo que eu consiga assimilar melhor as coisas conforme o meu entendimento, se é que me entende. Cada passo de aprendizado por exemplo, tem que ser anotado, á princípio para mim é melhor assim, depois a gente tira de letra. Já fiz downloads do programa Kompozer,Top Style Lite, Só que para mim aprender tenho que ter algumas coordenadas, se conheces alguem que tenha um tempinho disponível para me explicar sem compromisso é claro, pelo msn, eu fico muito agradecida.
Meu msn-e-mail: lu.danluccistore@hotmail.com
Grata...

Luciana
Marcos Araujo 19 Anos - Guarulhos,sp
Publicado em:
04/10/2009 - 03:11
Marcos Araujo 19 Anos - Guarulhos,sp
Muito fácil mesmo
Léia
Publicado em:
17/10/2009 - 02:14
Kra salvou-me esse tutorial... stava a horas tentando inserir um video no meu site. pelo dreamweaver... aq no browser funfava bunitim... + quando eu enviava pro servidor... so aparecia o espaço em branco... o q tv faltando eu num faço ideia!!! tentei de tudo no dream, insert/media/flv nada... insert/media/videoembed esse fica com a aparencia do media player + nehum funfou quanodo enviei pro servidor... a ultima saida foi essa pegar noy outube msm... bom
Graças a Deus! né... kkkkkkk
+ valeu msm... bjão
Degol
Publicado em:
16/11/2009 - 12:37
Degol
Muito bom esse seu tutorial.
Brenno Alves
Publicado em:
04/01/2010 - 13:45
Brenno Alves
Muito bom e muito util.
Valeu mesmo.
Julio
Publicado em:
04/02/2010 - 17:16
Julio
Me tira uma dúvida, esses (height="250")dois procedimento na verdade não vai estar só excluindo a altura o vídeo