Ir para conteúdo / Skip to content

Inserir vídeos do Youtube em XHTML válido

Postado em: 22 de janeiro de 2008 por Pedro Rogério

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

Isso pode lhe interessar:

Deixe seu comentário

5 comentários para esse post

  1. Movies and Film Blog » INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDO disse:
    #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. Media Districts Entertainment Blog » INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDO disse:
    #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. Youtube » INSERIR VÍDEOS DO YOUTUBE EM XHTML VÁLIDO disse:
    #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 disse:
    #4

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

  5. Mikael Carrara disse:
    #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!

Deixe seu comentário