Abrindo vídeo do Youtube dentro de uma Popup

Olá Pessoal, hoje vou mostrar para vocês como abrir um vídeo do youtube dentro de uma janela popup. Esse código é muito bom quando precisamos usar muitos vídeos em uma única página, geralmente incorporamos e dependendo da quantidade de vídeos a página pode ficar mais lenta, e se criarmos um link o leitor será direcionado para outra página, esse código abre o vídeo em uma janela popup dentro do seu blog, otimizando o carregamento da página e mantendo o leitor na
página do seu blog, vamos ao tutorial.
Acesse o Painel do Blogger, vá em Modelo, Editar Html (não precisa marcar expandir modelos de widgets) e procure pela tag </head> e acima dela cole o código abaixo clique em visualizar para ver se esta tudo ok e salve.

Alerta! Antes de fazer qualquer modificação, faça um backup do seu modelo.
Vá em modelo ► Fazer backup/Restaurar ► Fazer download do modelo completo.

 

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

 

 

 Esse código não é uma regra para todos os vídeos, para que o vídeo abra dentro da popup é preciso incluir o código html a seguir no lugar que você desejar, pode ser dentro dos artigos, na sidebar, em qualquer parte do seu blog. 

 

 <a class="youtube" href="#" rel="ID DO VÍDEO" title="jQuery YouTube Popup Player Plugin TEST">TEXTO QUE CLICÁVEL ABRIRÁ A POPUP</a>

 

 

 Não esqueça de fazer as seguintes alterações.
ID DO VÍDEO – Id do vídeo hospedado no youtube que abrirá na Popup.
TEXTO CLICÁVEL QUE ABRIRÁ A POPUP – Texto que será o link para abrir a Popup.
Você também pode colocar uma imagem no lugar do texto, para isso é só usar o código a seguir. 

 

 <a class="youtube" href="#" rel="ID DO VÍDEO" title="jQuery YouTube Popup Player Plugin TEST"><img src="URL DA IMAGEM" /></a>

 

 

 Não esqueça de fazer as seguintes alterações.
ID DO VÍDEO – Id do vídeo hospedado no youtube que abrirá na Popup.
URL DA IMAGEM – Endereço da imagem que será o link para abrir a Popup.

• Como descobrir o id nos vídeos do Youtube?

Acesse normalmente o vídeo na página do youtube, clique no botão compartilhar e tudo que estiver depois de http://youtu.be/ é o id do seu vídeo.
Veja o exemplo:http://youtu.be/HEvnNzaadCI – a parte destacada em vermelho é o id do vídeo. 

 

 

 

 

 O que achou deste artigo? Gostou dos vídeos na Popup?
Comente, sua opinião é muito importante.