Videos Flotantes de Youtube en las entradas de Blogger

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 </style> o ]]></b:skin> y agregar el siguiente código CSS en la parte de arriba.

.floatvideo-wrapper{width:100%;max-width:100%;margin:15px auto}.floatvideo{position:relative!important;width:100%!important;max-width:100%!important;aspect-ratio:16/9!important;background-color:#000;border-radius:8px;overflow:hidden}.floatvideo iframe,.video-responsive iframe{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important;border:0!important;object-fit:cover}.floatvideo.fly{position:fixed!important;bottom:20px!important;right:20px!important;width:320px!important;max-width:90vw!important;aspect-ratio:16/9!important;height:auto!important;z-index:9999!important;border-radius:10px;box-shadow:0 10px 25px rgba(0,0,0,.4);animation:fadeInUp .3s ease forwards}.floatvideo-close{display:none;position:absolute;top:8px;right:8px;width:26px;height:26px;background:rgba(0,0,0,.8);color:#fff;border:none;border-radius:50%;font-size:14px;font-weight:700;cursor:pointer;z-index:10000;align-items:center;justify-content:center}.floatvideo.fly .floatvideo-close{display:flex}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media screen and (max-width:640px){.floatvideo.fly{bottom:15px!important;right:15px!important;width:220px!important}}

2º A continuación, debemos agregar el siguiente código script antes del cierre de </body> y darle clic en guardar cambios.

<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded",function(){var e=document.querySelector(".floatvideo-wrapper"),t=document.querySelector(".floatvideo");if(t){var o=t.querySelector(".floatvideo-close");o&&o.addEventListener("click",function(e){e.stopPropagation(),t.classList.remove("fly"),t.classList.add("is-closed")})}if(e&&t&&"IntersectionObserver"in window){new IntersectionObserver(function(o){o.forEach(function(o){o.isIntersecting||t.classList.contains("is-closed")?(e.style.height="auto",t.classList.remove("fly")):(e.style.height=e.offsetHeight+"px",t.classList.add("fly"))})},{threshold:.1}).observe(e)}document.querySelectorAll(".video-youtube[data-src]").forEach(function(e){var t=e.getAttribute("data-src");if(t){var o=document.createElement("iframe");o.className="video-youtube",o.src=t,o.setAttribute("allowfullscreen","true"),o.setAttribute("loading","lazy"),e.parentNode.replaceChild(o,e)}})});
//]]>
</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.