JANELA MODAL PARA EXIBIR VÍDEOS

Vamos mostrar como carregar vídeos do youtube em uma janela modal na plataforma blogger, 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='https://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='https://dl.dropbox.com/u/85270148/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='https://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 seguida Adicionar 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 seguinte atributo:

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: https://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.