Plugin YouTubin para jQuery

Categoria: Programação

YouTubin é um plugin para jQuery que embeda vídeos do YouTube de forma clara, fácil e discreta. Simplificando, este plugin pega qualquer endereço do YouTube e o substitui pelo código HTML do vídeo. O plugin utiliza o SwfObject 2 se iniciado, caso contrário apenas insere o código HTML padrão.

As opções avançadas incluem podem ser usadas com seletores do jQuery e pode ser configurada algumas propriedades do SWF como largura, altura, versão do flash, passar flashvars e parametros. O plugin permite carregar o player após o link ser clidado ao invés de carregar junto da página.

Baixar

Como usar YouTubin

Seu uso básico é bem simples. Apenas inclua os arquivos Javascript necessários como (jQuery, YouTubin e opcionalmente SwfObject 2), então escreva:

$(function() { $.youtubin(); }); 

Isto irá procurar por todos links válidos do youtbe e substituí-lo pelo código HTML do embed.

Se você quiser substituir apenas alguns tipos de links, utilize um seletor para fazê-lo:

$(function() { $('a.youtube').youtubin(); }); 

Para passar opções ao plugin, como largura e altura do SWF:

$(function() { $('a.youtubin').youtubin({ swfWidth : 400, swfHeight : 360 }); }); 

Isto dimensiona o player para 400px de largura e 360px de altura. Abaixo segue a lista completa de opções.

Opções do plugin YouTubin

  • swfWidth (String)

    Largura do player swf. A unidade padrão é em px, infome apenas números. Também é possível informar em porcentagem, por exemplo 100%, levando em consideração o CSS aplicado.

  • swfHeight (String)

    Altura do player swf. A unidade padrão é em px, infome apenas números. Também é possível informar em porcentagem, por exemplo 100%, levando em consideração o CSS aplicado.

  • replaceTime (String)

    Esta opção serve para controlar quando a substituição ocorre. Por padrão é 'auto' (quando a página é carregada. A outra opção 'click', faz com que seja substituido apenas quando o link for clicado.

  • keepLink (Boolean)

    Esta opção anexa o vídeo depois que o link for substituido. Isto afeta apenas o metodo 'auto'.

  • wrapper (String) (Deprecated as of Youtubin v1.2)

    Mute esta opção para personalizar o elemento que irá conter o SWF. Modifique se você quer anexar um CSS personalizado. O padrão é '

    '

  • srcOptions (Query String)

    Modifique esta opção para mudar o parametro query string que será enviado. Útil para mudar opção de idioma. O padrão é '?hl=en&fs=1' para o metodo replaceTime como 'auto' e '?h1=en&fs=1&autoplay=1' para o método 'click' (ou 'auto' se a opção autoplay está configurada). As configurações do srcOptions sobrescreve qualquer configuração autoplay.

  • autoplay (Boolean)

    Método atalho para modificar a ação autoplay em srcOptions.
    Shorthand method for mmodifying autoplay behavior in srcOptions. Isto irá sobrescrever qualquer padrão além de srcOptions utilizados.

  • method (HTML Attribute String)

    Este é o atributo HTML que o plugin irá busccar para formar o caminho do SWF. Por padrão é o atributo 'href', mas pode ser mudado para 'src' ou qualquer outra coisa.

  • scope (jQuery object)

    Controla o escopo de onde o plugin procura os links de vídeos quando não visando um objeto específico. (O metodo $.youtubin();).

  • iphoneBoot Boolean

    Opção para melhor visualizar os vídeos do YouTube no iPhone. O padrão é verdadeiro. Definido para false se estiver usando vídeos não-YouTube.

  • flashVersion (String)

    Versão do flash utilizada, por padrão é '8'.
    Version of Flash the embeded swf uses, default is '8'. Só importa se usando o SWFObject 2. O padrão funciona bem para todos os vídeos do YouTube.

  • expressInstall (Path String)

    O caminho para expressInstall.swf, que é totalmente opcional. Só importa se usando o SWFObject 2. Padrão ''.

  • flashvars (Object)

    Qualquer variável flashvar que você queira passar para o SWF. Por padrão é um objeto vazio ({}) , funciona bem com os vídeos do YouTube.

  • params (Object)

    Qualquer parametro que você quer configurar para o SWF. O padrão é {menu : “false”, loop : “false” }.

jquery-1.3.1.js
Exemplo On-line
Exemplo zippado

zp8497586rq

Sobre o Autor
Junior Moro em Campo Grande, Mato Grosso do Sul e sou programador na dothCom.
Posts Relacionados
Comentários