Páginas

quarta-feira, 13 de março de 2013

Exibir vídeos numa única tela (popup)

O Blogger oferece um mecanismo que lhe permite exibir vídeos na tela: para cada vídeo linkado ao seu blog você ganhará "uma janelinha" do YouTube. Isso pode parecer funcional. Mas se você acumula um grande número de vídeos numa mesma página, aí você começa a ter problemas de espaço... Sem contar com o problema estético...

Eis aqui a solução para que uma única tela, na forma de popup,  se abra sempre que você quiser exibir um vídeo. Não importa onde estiveres, sempre que for clicado no "link para vídeo", que pode ser um texto ou uma imagem, a tela de vídeo se abrirá ao centro e, depois da apresentação, não será necessário retornar ao seu blog, pois a tela apenas se sobrepôs à sua página do blog.

Comece por adicionar ao script principal da sua página o código padrão que vai lhe permitir abrir os vídeos de qualquer local do seu blog. Para tanto, em "Configurações" vá para "Modelo" abra a edição em HTML.
ATENÇÃO: é sempre conveniente que antes de se fazer qualquer alteração no scrit, que se preserve o que está rodando. Assim, faça um backup do script antes de qualquer alteração.
Feito o backup, tecle Ctrl+F para abrir o mecanismo de pesquisa da parte de HTML (na parte superior do IE ou inferior do Monzila). Tecle </Head> para encontrar esta cláusula no script principal . Logo acima desta cláusula ( independentemente do que tiver acima), abra uma linha e cole o seguinte código (sem os traços, lógico):

-----------------------
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'/>
<script src='http://lab.abhinayrathore.com/jquery_youtube/jquery.youtubepopup.min.js?' type='text/javascript'/>
<script type='text/javascript'>
$(function () {$.fn.YouTubePopup.defaults.draggable = true;$(&quot;a.youtube&quot;).YouTubePopup({ autoplay: 1 });$(&quot;img.youtube&quot;).YouTubePopup({ idAttribute: &#39;id&#39; });           $(&quot;button.youtube&quot;).YouTubePopup({ idAttribute: &#39;id&#39; });$(&quot;a.custom&quot;).YouTubePopup({ idAttribute: &#39;youtube&#39; });$(&quot;a.hideTitle&quot;).YouTubePopup({ hideTitleBar: true });   });function scrollTo(id){var offset = $(&#39;#&#39; + id).offset().top;$(&#39;html,body&#39;).animate({scrollTop: offset}, 50);}</script>

-----------------------
Acrescentado o script para popup, salve seu script principal. Ele estará pronto para apresentar o popup a cada link clicado.

Para CRIAR O LINK:
Você pode incluir o link tanto na barra lateral do seu blog como dentro das páginas secundárias ou postagens. De início, opte por incluí-los na barra lateral. Para tanto, em Configurações vá para "Layout" e clique para criar um Gadget. Escolha o Gadget HTML/Java Script e cole, no modo HTML (não Rich Text), um dos seguintes códigos:

a) Se quiseres o link em forma de texto:

<a class="youtube" href="#" rel="VIDEO ID" title="jQuery YouTube Popup Player Plugin TEST">TEXTO DO LINK</a>

Onde as partes em vermelho devem substituídas por você da forma a saber:

i) substitua a expressão VIDEO ID pela identidade do vídeo junto ao YouTube. Para obter essa identidade, vá para o vídeo desejado (no YouTube), e clique em "COMPARTILHAR". Abaixo lhe será apresentado o código de compartilhamento no formato http://youtu.be/dfuhkCoiiB8, Despreze o que está destacado e fique só com o que vem depois da barra... Este é o ID do vídeo que deve substituir a expressão VIDEO ID.

ii) substitua TEXTO DO LINK pela expressão que você pretenda que apresente o vídeo ao ser clicada.

b) Se quiseres o link em forma de imagem:

<a class="youtube" href="#" rel="VIDEO ID" title="jQuery YouTube Popup Player Plugin TEST"><img src="LINK DA IMAGEM" /></a>
<br />


Da mesma forma, substitua a expressão VÍDEO ID e, ao invés de TEXTO DO LINK, agora você tem que substituir a expressão LINK DA IMAGEM pelo link de acesso à imagem que deseja mostrar.

Completada a inserção dos scripts no Gadget, salve-o e visualize seu blog para testá-lo.
Bem... Você pode inserir quantos links quiser, um após o outro no mesmo Gadget ou em partes separadas da página inicial, outras páginas ou postagens do blog.

Clique abaixo, no link para vídeo, para ver o efeito mencionado.


Bom divertimento!


7 comentários:

  1. muito bom seu post... estou tentando forçar a execução em HD

    ResponderExcluir
  2. Posso usar esse código para arquivos de vídeo do google drive? Como posso fazê-lo? Estou montando um blog de vídeos com arquivos pessoais.

    ResponderExcluir
  3. começou a aparecer uma faixa branca no meu.. do nada! No seu exemplo (chocolate... força... ) também! No chrome e IE. Estranho, sempre funcionou legal...

    ResponderExcluir
  4. Cara, este código serve apenas para vídeos do youtube? queria poder por outros tipos de videos, como do UOL, Google Drive entre outros.

    ResponderExcluir
  5. Ola por favor preciso de uma maneira que posso abrir videos no Google Drive e videos em MP4 ate msm embed teria como ? Alguem sabe me dizer Por favor Obrigado

    ResponderExcluir
  6. perfeito, agora eu queria saber como eu coloco este video como popup quando a pessoa entrar no site ou em uma determinada pagina, tem como?

    ResponderExcluir
  7. e do vimeo amigo? e tem para playlist? tipo ouvir enquanto navega?

    ResponderExcluir