How to add Sticky, Floating video on Page Scroll in blogger

By M.Muzammil Saturday, 9 March 2019

Share Tweet Share Share Email

You may have seen sticky, floating video on different websites like you are watching a video on any website and when you scroll down video is automatically fixed to the bottom of a webpage and when you scroll up the video Returns to its previous position that is basically called sticky floating video on page scroll.

You can add sticky, floating video on page scroll in blogger as well as in WordPress technique is same. for this tutorial we will be using the jQuery code to do that functionality.

I always try to provide you a demo and I will try to include the demo of this sticky floating video on page scroll you can scroll down and have a look on it.

So I will teach you or I will tell you how you can add this to your blogger blog for that you have to follow the steps which are listed below.

To make this functionality work properly you will need to have latest version of jQuery installed in your blogger blog.

1. Go to Blogger Dashboard
2. Go to Theme/Template Section
3. Click Edit HTML
4. Now Search for </head>

To search anything in blogger template section press Ctrl+F and then type term to search and press enter.

5. Now copy the code provided below and paste it above ending head tag which we have founded in step 4.

<style>
@-webkit-keyframes fade-in-up {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
.video-wrap {
  text-align: center;
}

.video iframe {
  max-width: 100%;
  max-height: 100%;
}
.video.stuck {
  position: fixed;
  bottom: 20px;
  right: 20px;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  width: 260px;
  height: 145px;
  z-index:99999;
  -webkit-animation: fade-in-up .25s ease forwards;
          animation: fade-in-up .25s ease forwards;
}

</style>
<script>
//<![CDATA[
var $window = $(window);
var $videoWrap = $('.video-wrap');
var $video = $('.video');
var videoHeight = $video.outerHeight();

$window.on('scroll',  function() {
  var windowScrollTop = $window.scrollTop();
  var videoBottom = videoHeight + $videoWrap.offset().top;
  
  if (windowScrollTop > videoBottom) {
    $videoWrap.height(videoHeight);
    $video.addClass('stuck');
  } else {
    $videoWrap.height('auto');
    $video.removeClass('stuck');
  }
});
//]]>
</script>

6. Save Theme/Template
7. Now where, in your webpage you want to show your video use the html code provided below.

<div class="video-wrap">
    <div class="video">
      <iframe width="600" height="340" src="https://www.youtube.com/embed/JnBJZDYH_dc" frameborder="0" gesture="media" allowfullscreen></iframe>
    </div>
  </div>

8. If you don't need errors, Then use the code as it is just simple replace highlighted text in html code with youtube video id.

Conclusion:
This method works in all video providers like youtube, vimeo, etc That's it i think that this tutorial was helpful for you i provided you this tutorial now its your turn to give your feedback in the comment section below and let me know that you like this sticky, floating video on page scroll or not.

M.Muzammil

I am a web Designer & Graphics Designer. I love to program and design. Sharing knowledge is my passion & Programming is my Hobby. Want Help? Contact Me its free.!