Hola amigos de ProgramasMegas, hace mucho tiempo varias personas me estuvieron pidiendo que haga un tutorial como este, que es para BLOG, y trata de "Compartir el Video para visualizar", ya que como hoy en día el mundo de viraliziación de vídeos están en su apogeo, satisfaciendo a muchos dueños de sus blog con las visitas diarias a su sitio.

Yo en especial no lo utilizo por diferentes motivo. Uno que es porque yo mas me dedico hacer tutoriales para programas PC, y otras cosas mas..

Hoy les enseñare a como colocar este truco en su BLOG. Antes de comenzar quiero darle los créditos a la web "AmorSevillista" ya que los códigos que utilizare en este tutorial son propiedad de ellos.
VIDEO TUTORIAL


PASOS A SEGUIR:

1. Vamos a Diseño | Edición de HTML > buscamos el siguiente código </head>, encima , colocamos el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<style>
#youtubeblocker {
position:relative;
margin:0px auto;
cursor:;
overflow: hidden;
border:0px solid #000;
width:640px;
height:360px;
}
#youtubeblocker iframe {
display:;
}
#youtubeblocker #image {
width:100%;
height:100%;
background-size:100% 100%;
}
#youtubeblocker #play {
position:absolute;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5X8XN559Dst9O5kvV0F5zS66A8rL2M3gtrr8-pd5iFvJlopJacFJFDCi8kF5X9NFu5iv81OooC-ygK4q_KXN8aoiThJSySdLFNxKjPsjbfDIavjuacHhy9oRj_soy0zDOfTdiB0GHZP8/s620/01.png);
border:0px solid #000;
z-index:1;
}
#youtubeblocker #play-button {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
}
#youtubeblocker #play-button:hover {
position:absolute;
cursor:pointer;
top:0;
left:0;
display:block;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElIi2gPFvLwefSTlU2BYeORO532SuEhSe-l_9YBg1f8tmPxu49dgnDQ9u4Ab4JJrIRNl_4GQn6vakII5eBHZExsANjsgR8l5GDA8FF2U9JKT3NHfM7BW3xSHTD2n-1OVdqEAhxrTIIIQ/s620/02.png);
}
#youtubeblocker #sharebox {
display:none;
cursor:pointer;
position:absolute;
top:0;
left:0;
width:640px;
height:360px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk_TpkMjfM6nVh8DIjF_vqKjJflHlm6NVXirQ030-d5mtUh4aECVf6pu5E0-vaP5_Wo3rXP58uquZ9Q0_G85g20hw_fRVXA_4IUGLt_PnKT7Gp63klCh81i54lERiqAWHpPGET8UnZNug/s620/01.png);
border:0px solid #000;
z-index:2;
}
iframe.ytb-embed {
max-width: 100% !important;
display: block;
}
</style>
2. Ahora vamos a buscamos <body>, después del código, pegamos lo siguiente:
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({
appId: '',
status: true,
xfbml: true
});
// Additional initialization code such as adding Event Listeners goes here
};
function youtubeblocker() {
FB.ui( {
method: '../sharer/sharer.php?u=' +document.URL+ '',
link : document.URL,
},
function(response) {
if (response) {
$("#image, #play, #play-button, #sharebox").fadeOut('slow');
} else {
//alert('');
}
}
);
};
function sharebox(){
$("#sharebox").show();
}
function youtube (IDyoutube) {
var output1 = '<div id="youtubeblocker"><div id="image" style="background-image: url(http://img.youtube.com/vi/' + IDyoutube + '/0.jpg)"><div id="play"><div id="play-button" onclick="sharebox();"></div></div><div id="sharebox" onclick="youtubeblocker();"></div></div><iframe width="640" height="360" src="http://www.youtube.com/embed/'+IDyoutube+'?autoplay=0" frameborder="0" allowfullscreen></iframe></div>';
document.write (output1);
}
//]]>
</script>
</b:if>


3. Listo a hora le damos en GUARDAR.

 4. Creamos una entrada y siempre que queramos colocar un vídeo. Vamos a utilizar el siguiente código ( Recuerda que el código se coloca en la sección HTML, está al costado de Redactar).
<script>youtube("ID DE YOUTUBE");</script>
Para saber cual es el id del vídeo, vamos a ir a la URL del vídeo de youtube.

https://www.youtube.com/watch?v=bGhGTtE2Wu0&feature, y copiamos lo que está en azul, en el código.