Há algum tempo atrás tive um problema para inserir vídeos do Youtube no site do meu cliente, não por que sabia como inserir, mas por que o site do meu cliente estava com o código todo válidado pela W3C e quando eu colocava o embed do vídeo, perdia a validação, então como resolver esse problema?
Após muitas pesquisas na internet e conversas com desenvolvedores amigos meu, descobri uma maneira de contornar esse problema.
Então vamos lá, mãos a obra!
A técnica consiste na reescrita do código embed (incorporar) para que ele fique válido.
Geralmente quando se pega o código embed lá do YouTube, ele vem assim:
1 | <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/6V_rYZo9sVg&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6V_rYZo9sVg&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> |
Um código muito grande e que não passa no teste de validação da W3C, para validá-lo basta reescreve-lo desta maneira:
1 | <object type="application/x-shockwave-flash" width="250" height="195" data="http://www.youtube.com/v/6V_rYZo9sVg"><param name="movie" value="http://www.youtube.com/v/6V_rYZo9sVg"/><param name="wmode" value="transparent"/></object> |
Bem mais curto e totalmente válido para os padrões da W3C, o grande lance nesse código é o seguinte: Neste novo visual do Youtube, você vai perceber que há um botão escrito “Compartilhar”, ao clicar nele vai aparecer o link do vídeo, o que é importante para nós neste link é o id do vídeo que é esse destacado na imagem abaixo:
substitua esse id em nosso código nos seguintes trechos logo após “…/v/”:
Aqui
1 | data="http://www.youtube.com/v/6V_rYZo9sVg"> |
e aqui
1 | value="http://www.youtube.com/v/6V_rYZo9sVg"> |
é isso, qualquer dúvida é só deixar um comentário.
Até a proxima
Nenhum post relacionado.
10 Responses to “Inserindo Vídeos do YouTube com código válido em seu site”
Esta dica me ajudou muito a validar meu site, pois a única coisa que estava interfirindo era a incorporação do video.
Valeu!!!
Olá Leonardo!
Pessoas como voce nos motiva a compartilhar o que vamos aprendendo. Fiquei tres dias procurando pela rede uma solução do porque meus videos do youtube quando inseridos no meu site só rodavam no Mozila Firefox e não rodavam no Internet Explorer. Até que te encontrei, meu amigo. Simplesmente fiz o que voce mandou e pronto. Resolvi meu problema. Muito Obrigado
Primeiro gostaria de agradecer pela dica. Devido a muitos dias pesquisando na internet, foi aqui que consegui resolver meu problema de inserir video do YouTube no Dreamweaver. Pois varios outros comentários ensinam com videos salvos no proprio computador, e outros de forma que vem ocasionando erro na hora de mostrar uma prévia do site. Você é “fera na arte de ensinar”.
Agradeço muito mesmo pela dica. Boa sorte irmão em seus trabalhos.
Esse código funcionou, parabéns e obrigada!
Cara, valeu! Ajudou muito!
Com esse código menor, não apareceu o link para o vídeo, ficou em branco. Será que fiz algo errado. Segue a função que usei em php:
function mostravideo($url) {
echo ”
“;
Aí alimentarei um BD com os links dos vídeos.
O primeiro abaixo, funciona, o outro não:
http://www.youtube.com/v/6V_rYZo9sVg&hl=pt_BR&fs=1&
http://www.youtube.com/watch?v=pL3hDrovGS4
NO CASO DE QUERER INCORPORAR O VÍDEO DO YOUTUBE E JOGAR NOS ‘MEUS VÍDEOS’ DO ORKUT, SAIBA QUE DA MANEIRA QUE VC CONSEGUIA, NÃO CONSEGUIRÁ MAIS, POIS O YOUTUBE ALTEROU ISSO !
A SOLUÇÃO É ASSIM:
ESCOLHA O VÍDEO E CLIQUE EM ‘COMPARTILHAR’; EMBAIXO APARECERÁ ‘LINK P/ ESTE VÍDEO’ E APARECERÁ UM CÓDIGO C/ LETRAS ENORMES. NÃO CLIKE AINDA! MAIS ABAIXO ESTÁ ESCRITO E-MAIL E HÁ DUAS OPÇÕES O(ORKUT) E FACEBOOK. SE SUA INTENÇÃO É INCORPORAR O VÍDEO NOS ‘MEUS VÍDEOS’ DO ORKUT,POR EXEMPLO,ENTÃO CLIQUE EM ‘ORKUT’ E IRÁS P/ SUA PÁGINA DE VÍDEOS ONDE CLICARÁS EM ‘INCLUIR VÍDEO’ E HAVERÁ, ASSIM, A INCORPORAÇÃO DO VÍDEO.
O MESMO PODE SE FAZER SE QUISER ENVIAR O VÍDEO AO FACEBOOK, NESSE CASO DEVENDO-SE CLICAR EM FACEBOOK.
Obrigado Amigo !!! Esta dica foi extremamente valiosa. Parabéns
obrigado, o codigo deu certo
valeu