por Marcos Elias
UPDATE: veja o post oficial no blog da API do YT
Já faz algum tempo que o YouTube tem um player em HTML 5. Mas boa parte dos vídeos do YT são vistos “embeddados” em sites e blogs por aí… Só que o código do embed usa a tag object, que puxa o elemento em Flash. Ou seja, quando você usa ela para embutir um vídeo, não estará usando o HTML 5.
Se você faz questão de embeddar em HTML 5 sempre que possível, a dica é usar um iframe :D Isso mesmo, iframes, um quadro com uma página dentro (é muito usado para carregar publicidade).
O código ficaria:
<iframe src="http://www.youtube.com/embed/IDDOVIDEO" width="400" height="300"></iframe>
Onde “IDDOVIDEO” deve ser trocada pela ID do vídeo. Dessa forma ele detecta o navegador e sistema em uso. Se der para usar HTML 5, beleza. Se não der, usa o player em Flash.
Fica aqui um teste:
Ah, aproveite que o YouTube agora permite escolher a largura/altura do vídeo embutido, então você já tem uma “calculadora” antes de copiar. Mas não copie o embed tradicional, pegue os números da largura/altura apenas e modifique nos campos width e height do iframe.
A ID do vídeo é um código único para cada vídeo, o texto que fica depois do v= (e antes de algum &, se a URL tiver mais parâmetros). Veja abaixo a ID destacada:
http://www.youtube.com/watch?v=WpYjcxJrGn8
Ou:
http://www.youtube.com/watch?v=WpYjcxJrGn8&feature=featured
E como ficaria o código para esse vídeo:
<iframe src="http://www.youtube.com/embed/WpYjcxJrGn8" width="720" height="565"></iframe>
Uma última observação… É que parece que isso ainda está em beta, talvez só quem ativou o HTML 5 beta (entrando em youtube.com/html5) verá o vídeo com o HTML 5. Afinal no Safari não funcionou nem mesmo ativando a opção de HTML 5 no YouTube. O uso do iframe deve ser mais garantido para exibição em HTML 5 no futuro, já que o Google criará o player da melhor forma possível. Já o código object com a identificação de conteúdo em Flash deixa claro que só usará o Flash.
Ah, veja também outros motivos em que o HTML 5 fica beeem atrás do Flash.
Via Labnol.org
