Marco Flotante para tu sitio web o Blog

Videos totalmente responsivos de Youtube en nuestro blog, de esa manera, el video de Youtube agregado en la publicación seguirá automáticamente las dimensiones de la pantalla del dispositivo que está utilizando. Para aquellos que estén interesados es instalar esta opción en su plantilla, seguir los pasos a continuación.

1º Abrir el panel de control de Blogger / Tema / Perzonalizar /  Editar HTML. Agregar el siguiente código CSS antes </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>

Puede editar en el código marcado para determinar la posición del video.
2º A continuación, agregar el siguiente código antes de </body>
<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>
Para aquellos que han agregado el código de videos receptivos de Youtube en blogger , simplemente reemplácelo con el código anterior. Luego haga clic en  guardar tema.
3º Para colocar el código en nuestras paginas o entradas, utilizar este código en el editor de publicaciones (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 el código IDENTIDAD-VIDEO por la identidad de otro de video de Youtube que desee mostrar en su publicación.