How to create a floating video when scrolling the page in blogger website. How to create responsive floating video in blogger - Peak Fiction

Hello everyone, welcome to Peak Fiction. Today I would like to share with you another tip. It will be related to our video and web section to make it more convenient for people to watch videos on the web.
How to create responsive floating video in blogger - Peak Fiction

How to add a floating YouTube video in blogger site

Maybe you've watched videos on Youtube, Vidio or other sites where when the video is playing and you scroll down the page, the video automatically follows where you scrolled the page. The operation of the tricks I will share is almost the same, but the difference is that the video will still flow with the page we scroll even though the video is not yet played.

Make the video float when scrolling the page

Step 1: Log in to blogger home page -> theme -> edit html
Step 2: Find the ]]></b:skin> tag and add the code below above it
@keyframes fade-in-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@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 0.85s linear infinite;
  background: #f5f5f5 linear-gradient(to right, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0.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: 260px;
  height: 145px;
  -webkit-animation: fade-in-up 0.25s ease forwards;
  animation: fade-in-up 0.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%;
  }
}
Step 3: find the </body> tag and paste the code below above the </body> tag 
<script>
//<![CDATA[
// Floating video
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>');
    });
  }, 5000);
//]]>
</script>
Step 4: Save the theme.
Step 5: Your remaining job is to add the HTML code containing your YouTube video to your post and you're done. 
<div class='floatvideo-wrapper'>
  <div class='floatvideo'>
    <div class='youtube video'>
      <div class='video-responsive'>
        <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
      </div>
    </div>
  </div>
</div>
Remember to convert the YouTube video link into another video link you desire.
What if you want to add videos that aren't from Youtube? The answer depends on many things. It depends on the website where the video link comes from, because after I added the video link from Dailymotion and vidio.com, the video did not appear, while the video link from Google Drive could appear. For example like this:
<div class='floatvideo-wrapper'>
  <div class='floatvideo'>
    <div class='youtube video'>
      <div class='video-responsive'>
        <div class='video-youtube loader' data-src='//drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'></div>
      </div>
    </div>
  </div>
</div>
To add videos from iframe and not from YouTube, use the following code. 
<div class='floatvideo-wrapper'>
  <div class='floatvideo'>
    <iframe width='600' height='340' src='LINK-VIDEO-HERE' frameborder='0' allowfullscreen></iframe>
  </div>
</div>

Summary

Okay, that's it for my tutorial on how to create a video that floats when the page is scrolled. Hopefully with these tips you can make your website more interesting and generate new ideas to make other codes float on scroll, for example share buttons in the post section.