Colocando um Vídeo Dentro de uma PopUp - Versão #2

Nesta postagem irei mostrar para vocês como colocar um vídeo dentro de uma pop up. É muito simples.

Veja uma demonstração:
http://bloggerdicashot.blogspot.com.br/

Para cloca-la no blogger... Entre em "Layout" - "Adicionar um gadget" - "HTML/Java Script" e cole o seguinte código

<style type='text/css'>
@media (max-width:800px){ #DicasHot-box { display:none; } }
#DicasHot-box {
position:fixed !important;
position:absolute;
top:-700px;
left:39%;
margin:0px 0px 0px -182px;
font:normal Dosis, Georgia, Serif;
color:#333;
-webkit-box-shadow:0px 0px 10px #333;
-moz-box-shadow:0px 0px 10px #333;
box-shadow:0px 0px 10px #333;
background:#fff;
}
#DicasHot-box a.close-popup {
position:absolute;
top:-25px;
right:0px;
font:25px Arial, Sans-Serif;
text-decoration:none;
text-align:center;
color:#f2f2f2;
cursor:pointer;
}
#DicasHot-box a.close-popup:hover { color:#fff; }
#DicasHot-box a.close-popup:active { opacity:0; }
#DicasHot-box div.black-bg { background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYktjIDJyAzBEdQsELHfB4j-4ZqyyeGsmaZ7t9hLr387FQb2DkBPw8G8Y6PCImeT3pknO2pX11iW6Kr_qyRTJ7QHfqxOhHB78up-WgUx0CUbK1c9wbMwoTm-tijA62dCkYJNyIftXEL05/s1600/ajax-loader-apps.gif) no-repeat center;position:fixed;top:0px;left:0px;width:100%;height:100%;opacity:.6;z-index:-500; }
#DicasHot-box div.gambar-space { border:5px solid #fff; position:relative; background:#fff;border-bottom:0px;}
#DicasHot-box div.gambar-space img { width:600px; height:400px; }

.DicasHot-vídeo{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tVDqM_0eZbde7vVciGEd2IFmfWhvph1uC8rs19n5Kdh-Lm8cgJqptx55XRHMnetdBnst7Pl4ZttdjdacLJsGGcT4FloWDGwUl2aaWwyw4GEjgWls90pU5k_iBjdotD9wHYFQbRT1gs7A/s1600/BS+Monitor.png) no-repeat top center;height:458px;width:580px;padding-top:38px;padding-left:72px;;margin-left:30px}
</style>
<div id='DicasHot-box'>
<a class='close-popup' href='#'>&#215;</a>
<div class='black-bg kaluar'></div>
<div class='gambar-space'>

<div class="DicasHot-vídeo">
<iframe allowfullscreen="" frameborder="0" height="283" src="//www.youtube.com/embed/n6rJbZm_CfU?feature=player_embedded" width="511"></iframe>
</div>

</div>
<div style="text-align: right;">
<span style="font-size: xx-small;">Widget by <a href="http://dicashot.blogspot.com.br/" target="_blank">DicasHot</a></span></div>
</div>
<script type='text/javascript'>
$(window).bind("load", function() {
$('#DicasHot-box').animate({top:"100px"}, 2000);
$('a.close-popup, .kaluar').click(function() {
$(this).parent().fadeOut(500);
return false;
});
});
</script>

Se a PopUp não ficar nas dimensões certas em seu blog, você pode ir alterando os valores nas partes destacadas de vermelho. E, na parte destacada de azul, você irá colocar o ID do seu vídeo. Como saber qual o ID  do meu vídeo? 

O ID do vídeo é sempre os valores que vem depois do sinal de = (igual). Por exemplo:

https://www.youtube.com/watch?v=n6rJbZm_CfU

Qualquer duvida, não deixe perguntar!!!

Tendo feito isto, está pronto!!!