SCRIPTS E VARIEDADES

Vamos mostrar como carregar vídeos do youtube em uma janela modal na plataformablogger, o código dá um efeito bem profissional ao seu blog, além de ser muito bonito.

Para isto vamos utilizar o plug-in FancyBox associado ao Jquery.



Primeiro passo:

Faça login no blogger clique em Modelo e em seguida Editar html.



Segundo passo:

No HTML do template pressione as teclas Ctrl + F e procure pela tag </head> e logo acima cole o seguinte código:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/85270148/vídeo.js' type='text/javascript'/>

Visualize, e se estiver tudo certo clique em Salvar modelo.

Terceiro Passo:

Agora vamos inserir a função que chama a janela, clique em Layout em seguidaAdicionar um Gadjet e clique em HTML/Javascript.



Cole o seguinte código:


<script type="text/javascript">

jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'elastic',
'title' : this.title,
'width' : 620,
'height' : 365,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});

</script>

Salve e pronto! Seu blog já está pronto para exibir a modal.

Ultimo passo:

Toda vez que você quiser exibir um vídeo com este efeito, terá que usar o seguinteatributo:

1- Para inserir imagens com o link do efeito

<a class="video" href="URL DO VIDEO;autoplay=1"><img src="URL DA IMAGEM" alt="Clique para assistir" /></a>

Exemplo:

2- Para inserir um link normal de texto

<a class="video" href="URL DO VÍDEO;autoplay=1">Clique aqui</a>

Exemplo:Clique aqui

Para achar a url do vídeo, vá até o youtube clique em Compartilhar na parte inferior do vídeo, agora clique em Incorporar, e em seguida marque a opção Usar código de incorporação antigo.

Você deverá copiar esta parte da url que esta no código fornecido pelo do youtube url:http://www.youtube.com/v/wvNs-io9EYc?version=3&amp agora é só colar no local indicado.

Importante:Caso você já tenha o plug-in Jquery marcado em vermelho no segundo passo, copie somente os outros.

Nota: Este código também suporta outros serviços de vídeo: Vímeo, google vídeos etc… Basta seguir os mesmos passos para extrair a url do vídeo usada no tutorial.