Inserir vídeos do Youtube em XHTML válido

Postado por: Pedro Rogério em

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:


<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:

Vídeo (Objeto multimídia)

Referências

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

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.

14 Responses to “Inserir vídeos do Youtube em XHTML válido”

  1. [...] 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 [...]

  2. [...] 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 [...]

  3. [...] 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: [...]

  4. Rodrigo

    Tudo lindo. Pena que o YouTube não nos ajude e necessite do parâmetro “wmode”, para deixar o fundo transparente =(

  5. 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!

  6. Paulo Castilho

    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.

  7. Rafael

    Boa! realmente da dor de cabeça…mas agora o meu site tá válido graças a dica, obrigado

  8. Po vlw por essa dica agora ta funcionando aqui…brigadao

  9. wagner

    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á…

  10. @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.

  11. 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?

  12. Ae pedro, ja resolvi o link era só por: http://www.youtube.com/v/F0ByB0KgpKA

    vlw pelo tutorial.

Leave a Reply