Oficina da Net » Programação » HTML

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

Novo aqui no site? Talvez gostaria de assinar o
RSS feed do site?

Publicado em: 07/11/2007
Área: HTML
Visualizações: 4.988
Comentário(s): 3

imprimir envie por e-mail compartilhe
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...


» clique aqui para comentar
Preencha o formulário para comentar:
Nome:*

E-mail:* (não será exibido)

Site: (http://)

Comentário:*

Deseja receber os comentários no e-mail?

Anti-spam: (nova imagem)





Celio

Publicado em: 01/11/2008 - 21:23

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

super legal essa dica me ajudou mto. um abraço.

 

Lucas

Publicado em: 23/12/2008 - 14:54

cara me quebro o galho esse teu script

 

Autor da matéria
Jonathan Lamim Antunes
» site do autor
Jonathan Lamim Antunes
Web Designer e Programador Web (PHP/MySQL) e Desktop (Delphi). Professor de Informática.

Todas as matérias de Jonathan Lamim Antunes

Publicidade
Seguir o Oficina da Net
RSS

RSS

RSS
Top matérias do mês
Matérias relacionadas
Destaque
Tags

© 2005 - 2009 - Oficina da Net - v 4.0 - É proibida a reprodução parcial ou completa do conteúdo deste site sem autorização por escrito. Resolução adequada: 1024x768px.

Parceiros: Bahia em Foco  |  Blog do Vicente  |  BuscaKi  |  Chongas  |  ClicRN  |  Código Fonte  |  Coletânea de ícones  |  Comunicação Digital  |  Concurso Público  |  Concursos  |  Criação de sites  |  CriarWeb  |  Downloads  |  Fontes Grátis  |  GMasters  |  Hospedagem  |  Hospedagem de sites  |  Ícones  |  Infonet News  |  iParaiba  |  JLAMIM  |  MX masters  |  Notebook  |  Portal Super  |  Profissionais de Web  |  Qualidade Brasil  |  Renan Lima  |  SEO Master  |  Sonhos  |  tutoriais.org  |  WebLivre  |  Zoom Digital