Como embutir (embed) vídeo do YouTube em HTML 5

Conhece a Digital Ocean? Tenha VPS em cloud pagando a partir de US$ 5 por mês! Cadastre-se pelo meu link de afiliado aqui e ganhe US$ 10! Dá para testar o plano mais básico por 2 meses, ou o segundo por um... Existem várias distros Linux pré-configuradas, muitos tutoriais de instalação dos serviços web e um excelente suporte. O serviço é rápido e estável, tenho gostado muito! Vale a pena conferir e resgatar os seus 10 dólares de crédito ao ativar sua conta. Eles aceitam PayPal ;)

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

publicidade
comments powered by Disqus

Comentários arquivados

  1. Felipe escreveu

    Não curti muito esse lance HTML5.
    Preferia as coisas como estavam.

  2. acidmind_bh escreveu

    Nossa Felipe .

    Nao quero ser grosseiro .

    O senhor perdeu a melhor oportunidade da sua vida de ficar calado .

    Sem nada contra sua pessoa .

    Desculpe ser direto .

  3. eduardo escreveu

    Marcos parabéns, sua dica me ajudou muito,estava com dificuldades de embutir os vídeos do youtube em um iframe e sua dica caiu do ceu. São pessoas assim como vc que ajudam a tornar a internet em algo mais inteligente com conteúdo…valeu

  4. David Felipe escreveu

    poxa marcos, obrigado mesmo pela dica, tava quebrando a cabeça aqui para achar o código…
    valeu mesmo cara!! :-)