Como colocar Videos flotantes de Youtube en las paginas o entradas de Blogger, videos que floten cuando la página se desplaza hacia la parte de abajo. Tal vez haya encontrado en internet muchos sitios web que cuando un video se está reproduciendo y uno continua bajando en la publicación, este video se desplaza hacia la parte lateral de la página, el video seguirá automáticamente flotando siguiendo la página incentivando al visitante en darle clic al reproductor del video.
Videos flotantes implementados totalmente responsivos de Youtube en nuestro blog, sirve para mantener la atención de los usuarios en nuestra publicación, centrando la atención en el video de Youtube agregado en nuestra entrada de blogger, las dimensiones de la pantalla se adaptaran al dispositivo que se esta utilizando en ese momento.Para instalar videos flotantes de youtube en nuestra plantilla blogger, debemos seguir los seguir los paso a continuación.
1º Abrir el panel de control en Blogger / Tema / Editar HTML. Buscar la etiqueta de cierre </head> y agregar el siguiente código CSS en la parte de arriba de </head>
<style>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:350px;height:250px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>Podemos editar el código CSS marcado para determinar la posición del video "bottom:20px;right:20px;"
<script>
//<![CDATA[
// Video Melayang
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>1º Para colocar videos flotantes en nuestras paginas o entradas, siempre utilizar este código html en el editor de publicaciones en la sección (Vista HTML).
<div class='floatvideo-wrapper'>
<div class='floatvideo'>
<iframe width='600' height='340' src='//www.youtube.com/embed/IDENTIDAD-VIDEO' frameborder='0' gesture='media' allowfullscreen></iframe>
</div>
</div>Remplazar dentro del código la palabra IDENTIDAD-VIDEO por la identidad del video de Youtube que desea mostrar en su publicación.
Segunda Opción: Podemos utilizar el código html de arriba para colocar videos flotantes en las entradas o paginas en blogger de diferentes plataformas que distribuyen videos como Facebook, Vimeo, Dailymotion, entre otros. Solo debemos reemplazar la dirección url de youtube "//www.youtube.com/embed/IDENTIDAD-VIDEO" por la dirección url embed de videos que deseamos mostrar en nuestra publicación.
