Inserir vídeos do Youtube em XHTML válido
Postado por: Pedro Rogério emO código para inserir vídeos do Youtube em sites que respeitam os WebStandards é uma dor de cabeça para desenvolvedores e para bloggers, pois o Youtube proporciona um código para você copiar e colar em nosso blog para reproduzir os vídeos de uma forma rápida e simples, mas o código não é correto como deveria:
<object width="425" height="373">
<param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/O0G7iKj6PS0&rel=1&border=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="373"></embed>
</object>
Se você for validar o código, verá os seguintes problemas:
- Se utiliza a tag object corretamente, mas ocorre a falta de alguns parâmetros como data e type.
- As tags param em XHTML devem ser fechadas com a sua mesma tag de abertura.
- O uso da tag não standard embed podem produzir incompatibilidades em browsers que não a utilizam, como, dispositivos móveis e leitores de tela.
- Não se proporciona um método alternativo caso o dispositivo não tenha suporte a Flash.
A solução é bem simples, basta codificar-mos da seguinte maneira:
<object data="http://www.youtube.com/v/O0G7iKj6PS0" type="application/x-shockwave-flash" width="425" height="350">
<param name="quality" value="high" />
<param name="movie" value="http://www.youtube.com/v/O0G7iKj6PS0" />
<img src="/img/video.png" alt="Vídeo (Objeto multimídia)" />
</object>
O código acima corrige vários conceitos, e além de tudo elemina o uso da tag embed, pois se trata de uma tag privada e totalmente fora dos padrões:
- Se utiliza a tag object corretamente com o link do objeto no atributo data e o tipo MIME no atributo type.
- As tags param agora são “unitárias” e compatíveis com XHTML, além de também serem compatíveis com HTML.
- Acessibilidade: Se utiliza um método alternativo, uma imagem que se mostrará caso o browser não tenha um plug-in do Flash instalado. E no caso de não haver suporte a imagens (leitores de tela, browsers de texto) é mostrado o aributo alt da imagem.
Abaixo, um exemplo de vídeo do youtube inserido corretamente em XHTML:
Referências
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
[...] Pinceladas da Web – Reflexões sobre XHTML, CSS, PHP e WebStandards put an intriguing blog post on INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDOHere’s a quick excerpt [...]
[...] Pinceladas da Web – Reflexões sobre XHTML, CSS, PHP e WebStandards put an intriguing blog post on INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDOHere’s a quick excerpt [...]
[...] Pinceladas da Web – Reflexões sobre XHTML, CSS, PHP e WebStandards wrote an interesting post today on INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDOHere’s a quick excerpt O código para inserir vídeos do Youtube em sites que respeitam os WebStandards é uma dor de cabeça para desenvolvedores e para bloggers, pois o Youtube proporciona um código para você copiar e colar em nosso blog para reproduzir os vídeos de uma forma rápida e simples, mas o código não é correto como deveria: [...]
Tudo lindo. Pena que o YouTube não nos ajude e necessite do parâmetro “wmode”, para deixar o fundo transparente =(
Muito legal a dica! Me ajudou bastante, mas acho que ficaria ainda melhor se omitirmos o border=”0″, assim validaríamos também no modo Strict. Bastando apenas deletar a borda no folha de estilos…
———————————————————————-
@ RODRIGO: O “wmode” é só colocar na mão!
O Orkut insere o vídeo do Youtube em suas páginas através da URL para o vídeo.
Vou ler a API do Youtube, talvez seja possível formatar a o código fornecido pelo Youtube a partir da URL.
Boa! realmente da dor de cabeça…mas agora o meu site tá válido graças a dica, obrigado
Po vlw por essa dica agora ta funcionando aqui…brigadao
muito bom
eu não consigo bota outro video sem ser o do exemplo, qndo eu mudo o link para o de outro video fica tudo branco e nao acessa o video ? o q eu faço ? obrigado desde já…
@José,
O código do vídeo deve ser inserido dessa forma:
http://www.youtube.com/v/-50BAXhxHTU
E não dessa forma:
http://www.youtube.com/watch?v=-50BAXhxHTU
Verifique a forma que você inseriu para ver se está correta.
Muito bom o post. E gostei muito da solução de colucar a tag img. Fiz uma imagem e tudo ok mas no I7 a imagem não aparece. Pode me ajudar?
Ae pedro,
na validacao o endereço do vídeo esta dando erro.
link video: http://www.youtube.com/v/F0ByB0KgpKA&hl=pt-br&fs=1&
link da validacao: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.poetapedrocezar.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Não consegui achar o porque deste erro.
Ae pedro, ja resolvi o link era só por: http://www.youtube.com/v/F0ByB0KgpKA
vlw pelo tutorial.